将元素 ID 作为参数传递给 jquery答案

【问题标题】：pass element ID as a parameter to jquery将元素 ID 作为参数传递给 jquery
【发布时间】：2015-11-02 22:15:34
【问题描述】：

我在网络表单上有一个选择框，根据选择的内容，它会显示一个隐藏的 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）。如果用户为 Select1 选择选项 2 或 3，则会出现 hiddentable11。如果他们为 Select2 选择选项 2 或 3，则会出现 hiddentable 12 我不想复制/粘贴此代码 40 次，并且在代码中将 Select1/hiddentable11 更改为 Select2/hiddentable12、Select3/hiddentable13 等。如何更改此代码这样我就可以将它重用于所有的 select/div 组合？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

给所有的选择框一个类，例如class="select". Then you can usethis.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"));
});

【讨论】：

【解决方案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();

【讨论】：

【解决方案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/

【讨论】：