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

首先，如果这是重复的，我想事先致歉，我确定解决方案已经存在，但我无法找到正确的方式来短语我的搜索，所以我空手而来。根据两个目标的ID显示/隐藏元素

我试图建立一个冗长的形式，并隐藏它的部分，直到他们需要。我试图创建一个“主”功能，以显示相应的div，而不是为每个20+部分创建一个功能。

我的计划是让id为复选框，它将显示该部分沿着id="test"的行，并且要显示的部分将有id="test_2"。然后在JS中，我将简单地将_2附加到将选择要显示的目标的代码。

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

$(".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>

来源

2013-07-16 Dryden Long

数据属性是魔语：

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

FIDDLE

做这种方式，这不要紧，你的标记是什么样子，它得到正确的元素每次，并且很容易刚才设置的数据属性标识。

旁注：不会的复选框的值总是1，你真的想看看它的检查或不

来源

2013-07-16 19:21:50 adeneo

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

认为是这样，所以这就是上面的代码！ – adeneo

使用相对选择，这样你就可以废除的ID。

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

来源

2013-07-16 19:20:45

你可以像ID this.id

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

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

来源

2013-07-16 19:21:19 Praveen

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

回答

相关问题