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();
    }       
});

该领域＆amp;默认情况下隐藏关联标签。但是，我正在构建的应用程序具有在同一页面上的多个条目的范围，因此可能有多个其他字段，如。关于如何扩展jQuery以应对页面上任意数量的“其他”字段的任何想法？

Answer 1

嗯，这不是微不足道的，但我实施的是“toggleOnSwitch”机制。页面的片段使用类名“toggleOnSwitch”注释，另一个类使用<option>，复选框或单选按钮确定可见性。附加到“toggler”元素的事件处理程序（即<options>或输入字段）在“toggled”元素中添加或删除特定类，并且（当“关闭”切换时确保输入字段为被标记为“残疾人”以及其他一些类似的簿记任务。

一个技巧是，当“toggler”元素类似于<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的元素都将显示在“更改”上。

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

2 个答案: