根据选择切换的清洁逻辑

Question

所以我有一个选择字段。

<select name="selection_group_1" id="selection_group_1" onChange="guests()"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="2">3</option> 
</select> 

的通知的onChange。我用这个来调用一个函数，而不是jQuery的$（）。change（），因为我从来没有对jquery .click，.change等任何东西运气......总是有bug。但如果有必要，我愿意使用它。

所以基本上当用户选择0,1,2,3我想切换div。这个设置看起来像这样。

<div id="guestNames" style="display:none;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
    <tr><td colspan="3">Please enter the guest names</td></tr> 
    <tr> 
     <td>Guest #</td><td>First</td><td>Last</td> 
    </tr> 
</table> 
</div> 
<div id="guest1" style="display:none;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td>Guest #1:</td> 
     <td><input type="text" name="text_field_5" id="text_field_5" style="width:70px;" /></td> 
     <td><input type="text" name="text_field_6" id="text_field_6" style="width:70px;" /></td> 
    </tr> 
</table> 
</div> 
<div id="guest2" style="display:none;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td>Guest #2:</td> 
     <td><input type="text" name="text_field_7" id="text_field_7" style="width:70px;" /></td> 
     <td><input type="text" name="text_field_8" id="text_field_8" style="width:70px;" /></td> 
    </tr> 
</table> 
</div> 
<div id="guest3" style="display:none;"> 
<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td>Guest #3:</td> 
     <td><input type="text" name="text_field_9" id="text_field_9" style="width:70px;" /></td> 
     <td><input type="text" name="text_field_10" id="text_field_10" style="width:70px;" /></td> 
    </tr> 
</table> 
</div> 

格#guestNames应该被默认设置为显示，因为它不是0 其余的div＃guest1虚拟机，＃guest2，＃guest3应该表现出这样的... 如果（1） - 显示DIV＃guest1虚拟机（3） - 显示＃guest1和＃guest2以及＃guest3 if（0） - 隐藏它全部。

现在我可以这样做我的方式，但我是一个jquery nooble，我的方式很长很累，逻辑甚至不是万无一失。本来我尝试过使用.toggle（），但是，当我选择2时，这样做效果不佳，而不是1会隐藏，2会显示...它总是依赖于我的第一选择。比我试图检查.css（“显示”），但这只是一个更长的版本，也造成了同样的问题。

因此，我真正需要帮助的做法和理解（如果有人可能需要一分钟解释）是我如何清楚地告诉列表中的jQuery列表并正确切换这些。

这里是我的可怕jfiddle - http://jsfiddle.net/xFZuH/

谢谢！

Answer 1

我冒昧地解决您的提琴：http://jsfiddle.net/xFZuH/1/

首先，你必须找出一种方法来映射的选择选项，要显示的div的值，在这种情况下，我选择了地图他们直接进行ID

<select name="selection_group_1" id="selection_group_1" onChange="guests()"> 
    <option value="guestNames">0</option> 
    <option value="guest1">1</option> 
    <option value="guest2">2</option> 
    <option value="guest3">3</option> 
</select> 

那么你应该得到的方式，选择您在同一时间被操纵的div，对于我给了他们所有的同一类

<div id="guestNames" class="divsToToggle"> 

然后，只需捕捉变化事件上的选择，获得当前选定的值，隐藏所有div并显示所选择的值重用我会建议包装这一切都在一个共同的父匹配

$('#selection_group_1').change(function() { 
    var id = $(this).val(); 
    $(".divsToToggle").hide(); 
    $("#"+id).show(); 
}); 

Ofcourse的div中你可以只选择你想要的div，或添加类的div的切换到选择的元素上的一个数据属性，如：

<select id="bla" data-target=".divsToToggle"> 
    .... 
</select> 

.... 

$('#selection_group_1').change(function() { 
    var id = $(this).val(); 
    var target = $(this).data("target"); 
    $(target).hide(); 
    $("#"+id).show(); 
});