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。