Javascript jQuery根据选择下拉列表显示/隐藏多个“其他”输入字段

我使用以下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以处理页面上任意数量的“其他”字段，您有什么想法吗？

好吧，这并不简单，但我实现的是一种切换机制。页面的片段用类名toggleOnSwitch和另一个类进行注释，该类告诉您什么、复选框或单选按钮决定了可见性。附加到切换器元素（即或输入字段）的事件处理程序从切换的元素中添加或删除特定的类，关闭时，确保将输入字段标记为禁用，并执行一些其他类似的簿记任务

一个技巧是，当toggler元素类似于一个或一个单选按钮输入时，当一个元素被关闭时，代码必须检查另一个元素是否被打开。这是因为当一个单选按钮由于另一个单选按钮被单击而丢失选中的设置时，不会记录任何事件

---

我一直在考虑发布我的代码，但它必须被清理一点，并为我自己的应用程序去除一个或两个专门的黑客。另外，我想让它使用John Resig的元数据插件，而不是在我知道metadata.js可用之前我自己做的低俗版本。

回答我自己的问题：

            $(".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类的以下所有元素都将在更改时显示