傳遞元素ID作爲jquery的參數

Question

我有一個Web窗體上的選擇框，根據所選內容，將顯示一個隱藏的div。

<script> 
$(document).ready(function() { 

    $("#Select1").change(function() { 
     $(this).find("option:selected").each(function(){ 
      if($(this).attr("Value")=="2"){ 

       $("#hiddentable11").show(); 
      } 
      else if($(this).attr("Value")=="3"){ 

       $("#hiddentable11").show(); 
      } 

      else{ 
       $("#hiddentable11").hide(); 
      } 
     }); 
    }).change(); 
}); 
</script> 

窗體將有35到40個選擇框/隱藏的div組合。選擇框中的選項值每次都是相同的（0,1,2,3,4）。如果用戶爲選擇1選擇選項2或3，則顯示hiddentable11。如果他們選擇選項2或3選擇2，hiddentable 12出現我不想複製/粘貼此代碼40次，並在代碼更改選擇1/hiddentable11選擇2/hiddentable12，選擇3/hiddentable13等。如何更改此代碼這樣我可以將它重用於所有的select/div組合？

Answer 1

給所有的選擇框類，例如class="select". Then you can use this.id`來獲取目標元素的ID，並將其連接到DIV ID。

$(".select").change(function() { 
    var num = this.id.slice(6); // get N from id="SelectN" 
    $("#hiddentable1" + num).toggle($(this).val() == "2" || $(this).val() == "3")); 
}); 

Answer 2

然後只需製作一個.Select類，並使用this，將相應的隱藏表作爲用戶定義的唯一數據屬性傳遞（我將以data-hidden爲例）。然後，你可以通過做"#"+$(this).attr("data-hidden")創建每個項目的正確選擇：

$(".Select").change(function() { 
    $(this).find("option:selected").each(function(){ 
     if($(this).attr("Value")=="2") { 
      $("#"+$(this).attr("data-hidden")).show(); 
     } 
     else if($(this).attr("Value")=="3") { 
      $("#"+$(this).attr("data-hidden")).show(); 
     } 
     else { 
      $("#"+$(this).attr("data-hidden")).hide(); 
     } 
    }); 
}).change(); 

Answer 3

試試這個。有了這個，你不需要依賴ID。您可以將多個選擇框複選到您的代碼和表格組合中，而不必更改您的js代碼。

<select id="select1"> 
    <option val="0">0</option> 
     <option val="1">1</option> 
     <option val="2">2</option> 
     <option val="3">3</option> 
    <option val="4">4</option> 
</select> 
<div id="hiddentable11"> 
    Hidden Contents of Select1 
    </div> 
<select id="select2"> 
    <option val="0">0</option> 
     <option val="1">1</option> 
     <option val="2">2</option> 
     <option val="3">3</option> 
    <option val="4">4</option> 
</select> 
<div id="hiddentable12"> 
    Hidden Contents of Select2 
    </div> 
<select id="select3"> 
    <option val="0">0</option> 
     <option val="1">1</option> 
     <option val="2">2</option> 
     <option val="3">3</option> 
    <option val="4">4</option> 
</select> 
<div id="hiddentable13"> 
    Hidden Contents of Select3 
    </div> 

$("select").change(function() { 
     var index = $('select').index($(this)); 
     index++; 
     var $this = $(this).find("option:selected").val(); 
      $("#hiddentable1" + index).css("display", $this === "2" || $this === "3" ? "inline-block" : "none");    
     }); 

http://jsfiddle.net/njzatgku/1/