jQuery - функция дублирует результат первого элемента, к которому она применяется

Question

Я работаю над формой заявки с несколькими полями Дата рождения.

Я создал простой ввод даты с выбранными элементами.Когда элементы выбора изменяют значения, они копируются в дополнительное скрытое текстовое поле для сохранения результатов.

Я написал функцию, которую хочу применить ко всем экземплярам ввода этой даты, однако он повторяетте же значения в дополнительных входных данных даты после заполнения первого.

Я думаю, что это как-то связано с тем, как переменные установлены для функции.

Как я могу получить функциюприменить к каждому экземпляру, к которому я применяю его, не повторяя результатов?

Пример Js Fiddle здесь: http://jsfiddle.net/allyreid/JyE8b/5/

Помощь оценена.

Answer 1

Вот исправление:

$.fn.dateofbirth = function() {
         return this.each(function() {
              $(this).children('select').change(function(){
                  var cont = $(this).parent();
                  var day = $("select[name='Day']", cont).val();
                  var month = $("select[name='Month']", cont).val();
                  var year = $("select[name='Year']", cont).val();
                  var fullDate = day + " / " +  month  + " / " + year;
                  $(this).parent().find('.result').val(fullDate);

               });
          });
    };

    $('td.dob').dateofbirth();

Ваша проблема в том, что при событии "onChange" вы выбираете значения с помощью: $("select[name='Day']").val();, а это только выпадающий список FIRST, поэтому вы всегда получаете одно и то же значение.

Исправление состоит в том, чтобы сначала получить родительский элемент элемента, который инициировал событие изменения, а затем работать с выпадающими, которые ВНУТРИ этого родителя.

Если у вас есть вопросы по поводу ядра, дайте мне знать.

Еще одна вещь

Вот что сделал трюк:

При выборе элементов с помощью jQuery вы можете указать контейнер внутри, где искать. Вот что я там сделал, у вас есть $(SELECTOR STRING, container_element)