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上显示。