Question

首先，我想提前道歉，如果这是重复的，我确定解决方案已经存在，但我找不到正确的方法来说明我的搜索，所以我空了手。

我正在尝试构建一个冗长的表单并隐藏它的部分直到需要它们。我试图创建一个显示相应div的“主”功能，而不是为我的20多个部分创建一个函数。

我的计划是让复选框id显示该部分与id="test"一致，并且要显示的部分将为id="test_2"。然后在JS中，我只需将_2附加到将选择要显示的目标的代码中。

以下是我的代码，在需要时根本不显示div。有关如何使这个工作，或者更好，一个更合适的解决方案的任何想法？谢谢！

JS

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

HTML

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

Answer 1

使用相对选择器，这样就可以取消ID。

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

Answer 2

您可以获得this.id

之类的ID

不要忘记使用===代替==

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

Answer 3

数据属性是神奇的词：

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

JS

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

FIDDLE

这样做，你的标记看起来并不重要，它每次都会得到正确的元素，并且很容易在数据属性中设置ID。

旁注：复选框的值不会始终为1，您是否真的试图查看是否已选中

根据两个目标的ID显示/隐藏元素

3 个答案: