jQuery的顯示/隱藏顯示我試圖顯示在所有其他選項

Question

我有這樣的jQuery腳本對話框：

// sorting the names of the fields we're hiding 
var timeFieldArray = ["reserveTimeOfDay","choice1TimeOfDay","choice2TimeOfDay","choice3TimeOfDay"]; 
// show/hide an optional field for the time of day 
$.each(timeFieldArray, function(index, fieldName) 
{ // Start by hiding everything 
    $("#"+ fieldName + "Optional").hide(); 
    $(".toValidate select[name='"+fieldName+"']").click(function() { 
     // is it selected & the correct value? 
     if($("option[value='OtherField']").is(":selected")){ 
      $("#"+ fieldName + "Optional").show("fast"); 
      $("input[name='"+fieldName+"Optional']").addClass("required"); 
     } else { 
      $("input[name='"+fieldName+"Optional']").removeClass("required"); 
      $("#"+ fieldName + "Optional").hide(); 
     } 
    }); // closing .Click 
}); // closing .Each 

基本上，當其他選項被選中我要採取正確的從timeFieldArray的位置並顯示與該字段相關的框。問題是，當我選擇另一個不是OtherFieldvalue的選項字段時，它們仍然顯示出來。有什麼建議麼？

我的HTML：

<ul> 
    <li> 
     <p><strong>First Choice</strong></p> 
     <p><label for="choice1Date">Date</label><input type="" name="choice1Date" class="dateField required" /></p> 
     <label for="choice1TimeOfDay">Time Of Day</label> 
     <select name="choice1TimeOfDay"> 
      <option value="am"> Morning (A.M.)</option> 
      <option value="pm"> Afternoon (P.M.)</option> 
      <option value="OtherField"> Other </option>      
     </select> 
     <div id="choice1TimeOfDayOptional"> 
      Other: <input type="text" name="choice1TimeOfDayOptional" /> 
     </div> 
    </li> 
    <li> 
    <p><strong>Second Choice</strong></p> 
     <p><label for="choice2Date">Date</label><input type="" name="choice2Date" class="dateField required" /></p> 
     <label for="choice2TimeOfDay">Time OF Day</label> 
     <select name="choice2TimeOfDay"> 
      <option value="am"> Morning (A.M.)</option> 
      <option value="pm"> Afternoon (P.M.)</option> 
      <option value="OtherField"> Other </option>      
     </select> 
     <div id="choice2TimeOfDayOptional"> 
      Other: <input type="text" name="choice2TimeOfDayOptional" /> 
     </div> 
    </li> 
    <li> 
     <p><strong>Third Choice</strong></p> 
     <p><label for="choice3Date">Date</label><input type="" name="choice3Date" class="dateField required" /></p> 
     <label for="choice3TimeOfDay">Time Of Day</label> 
     <select name="choice3TimeOfDay"> 
      <option value="am"> Morning (A.M.)</option> 
      <option value="pm"> Afternoon (P.M.)</option> 
      <option value="OtherField"> Other </option>      
     </select> 
     <div id="choice3TimeOfDayOptional"> 
      Other: <input type="text" name="choice3TimeOfDayOptional" /> 
     </div>          
    </li> 
</ul> 

Answer 1

您要爲檢查一些option與同時選擇的其他價值。相反，您應該檢查當前選擇框是否選擇了其他值。

所以：

if($(this).find("option[value='OtherField']").is(":selected")) { 
// find selected option within the select box that's changing 

而且我不知道，但在Chrome我不得不使用.change而不是.click。

最後，從個人的角度來看，如果你淡入淡出的話，如果淡入淡出，它可能會帶來更好的UI體驗 - 現在它會立即消失。只是一個想法:)

http://jsfiddle.net/Dd2YM/1/