传递元素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/