當選擇某個值時顯示隱藏的div

我有通過jquery生成的動態字段。我可以通過選擇功能觸發器.change顯示這些字段。每個選擇字段有三個選項Biology，Calculus和Others-Not listed。當選擇Others-not listed且值爲3時，該功能將顯示一個隱藏的div。我的問題是，如果有兩個選擇字段，並且選擇了Others-not listed選項，它將顯示所有其他選擇的隱藏div。我想只顯示這個隱藏的div爲特定的選擇字段。 JSFIDDLE 當選擇某個值時顯示隱藏的div

$(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); 
    } 
});

來源

2013-12-09 techAddict82

你反正委託的事件。而不是將事件綁定到每個元素，具體只使用Attribute starts with選擇器。

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

可改爲

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

並將其移出該showFields方法

並且示出和隱藏包含於容器中的特定元素，可以使用最接近的混合，然後到達父級，然後找到該對應塊的hideContainer div。然後

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

將變更爲

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

Check Fiddle

來源

2013-12-09 20:44:06

這是有幫助。我讀了更多關於它。將使用此。 – techAddict82

你超出了我的要求。謝謝。 – techAddict82

@ techAddict82 ..很高興有幫助:) –

嘗試使用.next()功能，所以它只能抓住下一個對象，而不是所有的人：

所以不是這樣的：

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

這樣做：

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

而且你也會這樣做隱藏：

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

來源

2013-12-09 20:42:09

更改代碼，選擇字段：

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

jsFiddle example

在你的代碼，$(".hideNewCourse")會顯示或隱藏所有該類元素。通過使用$(this).parent().find(".hideNewCourse")，您只能選擇相對於已更改的選擇的元素。

來源

2013-12-09 20:42:32 j08691

+1思想一樣，很少發生:) – Praveen

$(".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

來源

2013-12-09 20:42:34 Praveen

當選擇某個值時顯示隱藏的div

回答

相關問題