jQuery的显示/隐藏多个“其他”输入基础上选择下拉

Question

我使用follwoing jQuery来显示/页隐藏“其他”标题字段的字段默认隐藏。但是，我正在构建的应用程序在同一页面上有多个条目的范围，因此可能会有多个其他字段。有关如何扩展jQuery以应对页面上任何数量的“其他”字段的任何想法？

Answer 1

嗯，这不是微不足道的，但我实现的是一个“toggleOnSwitch”机制。页面的片段用类名“toggleOnSwitch”和另一个类来标注，该类说明<option>，复选框或单选按钮是否确定可见性。附加到“触发器”元素（即<options>或输入字段）的事件处理程序将添加或删除“切换”元素中的特定类，（当切换为“关闭”时，确保输入字段标记为“禁用“以及其他一些类似的簿记任务

一个技巧是，当”触发器“元素类似于<option>或单选按钮输入时，当一个元素切换为”关闭“时，代码必须检查另一个元素是否被“打开”，这是因为当一个单选按钮因为另一个单选按钮丢失了“已检查”设置而没有记录事件，因为已经点击了另一个单选按钮

我一直在考虑发布我的代码，但它不得不被清理一点点和条纹为我自己的应用程序编辑一两个专门的黑客。另外，我想让它使用John Resig的“元数据”插件，而不是我自己的俗气版本（在我知道“metadata.js”可用之前）。

Answer 2

要回答我的问题：

  $(".jTitle").change(function(){ 
      //set the select value 
      var val = $(this).val(); 
      if(val != "Other") { 
       $(this).nextAll('.jOther').hide(); 
      } else { 
       $(this).nextAll('.jOther').show(); 
      } 
     }) 

随着HTML之中：

<td> 
         <select id="titleDepend1" class="inlineSpace jTitle"> 
          <option value="Please select">Please select...</option> 
          <option value="Mr">Mr</option> 
          <option value="Mrs">Mrs</option> 
          <option value="Ms">Ms</option> 
          <option value="Miss">Miss</option> 
          <option value="Dr">Dr</option> 
          <option value="Other">Other</option> 
         </select> 
         <label for="otherDepend1" class="inlineSpace jOther">Other</label> 
         <input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" /> 
        </td> 

所以以下所有带班jOther元素将被显示的onChange。