Question

我有一个组合框，可以选择0 - 8和8组输入字段，其中每组输入字段都包含在具有相同类的div中。

我需要找出如何使用Jquery根据所选的组合框值隐藏/取消隐藏div。例如，如果我选择2，那么class =“member1”和class =“member2”需要是可见的，其余的是不可见的。如果我改变主意，然后选择1，那么class =“member1”会保持可见但是member2和其余部分被设置为不可见？

<div class="member1"> 
<input id="name1">
<input id="age1">
</div>
<div class="member2"> 
<input id="name2">
<input id="age2">
</div>
:
:
<div class="member8"> 
<input id="name8">
<input id="age8">
</div>

Answer 1

这很简单。考虑selected_number已经是从您所讨论的选择字段中提取的整数，代码可能如下所示：

jQuery(function(){
    var selected_number = 2;
    jQuery('.member1, .member2, .member3, .member4, .member5, .member6, .member7, .member8').hide();
    for (var i=1; i<=selected_number;i++){
        jQuery('.member'+i).show();
    }
});

作为证明see this jsfiddle（更改selected_number值以查看其工作原理）。

Answer 2

假设selectedValue是包含的整数选定的值。

for(var i=1;i<=8;i++){
   if(i<=selectedValue){
     $(".member"+i).show();
   } else {
     $(".member"+i).hide();     
   }
}

Answer 3

您可以为每个可切换的元素添加一个通用类，并在选择一个选项时将它们全部隐藏，然后只显示所需的一个。

$('.toggle-able').hide();
$('.member' + selectedValue).show();

JQuery循环通过DIV来隐藏/显示

3 个答案: