Показать скрытый div, когда выбрано определенное значение

Question

У меня есть динамические поля, созданные через jquery. Я могу отображать эти поля с помощью функции выбора функции .change. Каждое поле выбора имеет три варианта: Biology, Calculus и Others-Not listed. При выборе Others-not listed со значением 3 функция отображает скрытый div. Моя проблема в том, что если есть два поля выбора, и у одного есть опция Others-not listed, то он отобразит скрытый div для всех остальных. Я хотел бы просто показать этот скрытый div для конкретного поля выбора. JSFIDDLE

$(document).ready(function() { 
    $('select').change(function() { 
     var option = $(this).val(); 
     showFields(option); 
     return false; 
    }); 
    function showFields(option){ 

     var content = ''; 
     for (var i = 1; i <= option; i++){ 
      content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"' 
      content += '<option value="1">Biology</option>'; content += '<option value="2">Calculus</option>'; content += '<option value="3">Other - Not Listed</option>'; '"'; 

      content += '</select><div class="hideNewCourse" style="display:none;"><label for="newCourse_'+i+'">Add Course Name to List:</label><input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/></div></br></div>'; 

      $(document).on('change',"#coursename_"+i, function(){ 
       if ($(this).val() == "3"){ 
        $(".hideNewCourse").show();  
       }else{ 
        $(".hideNewCourse").hide(); 
       } 
      }); 

     } 
     $('#course_catalog').html(content); 
    } 
}); 

Answer 1

Вы в любом случае делегирования событий. Вместо привязки события к каждому элементу просто используйте только Attribute starts with селектор.

$(document).on('change',"#coursename_"+i, function(){ 

может быть изменен на

$(document).on('change',"[id^=coursename_]", function() { 

И подвигать его из метода showFields

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

$(".hideNewCourse").show(); 

изменится на

$(this).closest('div').find(".hideNewCourse") 

Check Fiddle

Answer 2

Попробуйте использовать функцию .next() так это только захватывает следующий объект, а не все из них:

Таким образом, вместо этого:

$(".hideNewCourse").show(); 

ли это:

 $(this).next(".hideNewCourse").show(); 

И вы бы сделали то же самое для hide:

 $(this).next(".hideNewCourse").hide(); 

Answer 3

Изменить код для выбранных полей к:

if ($(this).val() == "3") { 
    $(this).parent().find(".hideNewCourse").show(); 
} else { 
    $(this).parent().find(".hideNewCourse").hide(); 
} 

jsFiddle example

В коде $(".hideNewCourse") будет показать или скрыть все элементы с этим классом. Используя $(this).parent().find(".hideNewCourse"), вы выбираете только элемент по отношению к выбранному, который был изменен.

Answer 4

$(".hideNewCourse").show(); 

Вышеупомянутый представляет все элементы этого класса.

Вы должны быть избирательным, как

$(this).parent().find(".hideNewCourse").show();  

Затем

$(document).on('change',"#coursename_"+i, function(){ 
       if ($(this).val() == "3"){ 
        $(this).parent().find(".hideNewCourse").show();  
       }else{ 
        $(this).parent().find(".hideNewCourse").hide(); 
       } 
      }); 

Fiddle