0

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

我正在尝试构建一个冗长的表单并隐藏其中的部分，直到需要它们为止。我不是为我的 20 多个部分中的每一个都创建一个函数，而是尝试创建一个“主”函数来显示适当的div.

我的计划是设置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>
4

3 回答 3

0

使用相对选择器，因此您可以取消 ID。

$(".show").change(function(){
   if ($(this).val() == "1" ) {
        $(this).next('div').slideDown("fast");
    } 
    ...etc...
}
于 2013-07-16T19:20:45.947 回答
0

你可以得到像this.id

不要忘记使用===而不是==

$(".show").on('change', function(){
    if ($(this).val() === "1" ) {
        $("#"+ this.id + "_2").slideDown("fast");
    } 
    else {
        $("#"+this.id + "_2").slideUp("fast");
    }
});
于 2013-07-16T19:21:19.587 回答
0

数据属性是神奇的词：

<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');
});

小提琴

这样做，你的标记是什么样子并不重要，它每次都能得到正确的元素，而且很容易在 data 属性中设置 ID。

旁注：复选框的值不会总是1，你真的想看看它是否被选中

于 2013-07-16T19:21:50.483 回答