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/