jQuery根據選擇下拉列表顯示/隱藏多個“其他”輸入字段

Question

我正在使用jQuery在頁面上顯示/隱藏“其他”標題字段：

$('label[for=customerTitleOther], #customerTitleOther').hide();

$('.jTitle').change(function() {
    if($(this).val() != 'Other') {
        $('label[for=customerTitleOther], .jOther').hide();
    } 
    else {
        $('label[for=customerTitleOther], .jOther').show();
    }       
});

默認情況下，字段和關聯的標簽是隱藏的。 但是，我正在構建的應用程序在同一頁面上可以包含多個條目，因此可能會有多個其他字段。 關於如何擴展jQuery以應對頁面上任意數量的“其他”字段的任何想法？

Answer 1

好吧，這並非不重要，但是我實現的是“ toggleOnSwitch”機制。 該頁面的片段用類名“ toggleOnSwitch”和另一個類進行注釋，該類告訴<option> ，復選框或單選按鈕確定可見性。 附加到“ toggler”元素（即<options>或輸入字段）的事件處理程序可從“ toggled”元素中添加或刪除特定的類，並且（當“關閉”時，請確保將輸入字段標記為“已禁用”以及其他一些類似的簿記任務。

一個竅門是，當“ toggler”元素類似於<option>或單選按鈕輸入時，當一個元素被“關閉”時，代碼必須檢查看看是否另一個元素被“打開”。 這是因為當一個單選按鈕由於單擊了另一個而失去了“選中”設置時，沒有記錄任何事件。

我一直在考慮為此發布代碼，但必須對其進行一點清理，並為我自己的應用程序刪除一兩個專門的技巧。 另外，我想使用John Resig的“ metadata”插件代替我自己做的俗氣的版本（在我知道“ 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上顯示。