Javascript 基于两个目标的ID显示/隐藏元素

首先，如果这是重复的，我想提前道歉，我确信解决方案已经存在，但是我找不到正确的方式来表达我的搜索，所以我空手而来

我正试图构建一个冗长的表单，并隐藏其中的部分，直到需要它们为止。我没有为我的20多个部分中的每个部分创建一个函数，而是尝试创建一个“主”函数来显示相应的

div

我的计划是为复选框设置

id

，该复选框将显示与

id=“test”

类似的部分，并且要显示的部分将具有

id=“test_2”

。然后在JS中，我将简单地将

\u2

附加到选择要显示的目标的代码中

下面是我的代码，在需要时根本不显示

div

。有没有想过如何让这项工作，或者更好的是，找到一个更合适的解决方案？谢谢

JS

HTML

你好，世界

使用相对选择器，这样就可以不用ID了

$(".show").change(function(){
   if ($(this).val() == "1" ) {
        $(this).next('div').slideDown("fast");
    } 
    ...etc...
}

---

您可以像

this.id那样获取id

别忘了用

==

代替

==

$(".show").on('change', function(){
    if ($(this).val() === "1" ) {
        $("#"+ this.id + "_2").slideDown("fast");
    } 
    else {
        $("#"+this.id + "_2").slideUp("fast");
    }
});

---

数据属性是一个神奇的词：

<input type="checkbox" class="show" value="1" name="test" data-id="test" />
<div id="test">
    Hello World
</div>

这样做，不管标记看起来像什么，每次都会得到正确的元素，并且很容易在数据属性中设置ID

---

旁注：复选框的值不是总是

1

，你真的想看看它是否被选中了吗？

是的，我只是想看看它是否被选中了。

$(".show").on('change', function(){
    if ($(this).val() === "1" ) {
        $("#"+ this.id + "_2").slideDown("fast");
    } 
    else {
        $("#"+this.id + "_2").slideUp("fast");
    }
});

<input type="checkbox" class="show" value="1" name="test" data-id="test" />
<div id="test">
    Hello World
</div>

$(".show").on('change', function(){
    $("#" + $(this).data('id'))[this.checked?'slideUp':'slideDown']('fast');
});