根據選擇切換的清潔邏輯

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