Question

我正在尝试在我的网站上完成一项功能，根据选择下拉列表中的值显示/隐藏我网站的各个部分。

HTML片段：

<tr class="inputcontainer">
    <td class="label">Trade to:</td>
    <td class="input">
        <select data-group="tradeTo">
            <option value="1">Platinum</option>
            <option value="2">Keys</option>
            <option value="3">Mods</option>
        </select>
    </td>
    <td class="check"></td>
    <td class="errormessage"></td>
</tr>
<tr class="inputcontainer" id="trade_platinum" data-group="tradeTo" data-component="1">
    <td class="label">Platinum:</td>
    <td class="input"><input type="text" name="trade_platinum" value=""></td>
    <td class="check"></td>
    <td class="errormessage"></td>
</tr>
<tr class="inputcontainer" id="trade_keys" data-group="tradeTo" data-component="2">
    <td class="label">Key:</td>
    <td class="input"><select name="trade_keys" data-source="mod"></td>
    <td class="check"></td>
    <td class="errormessage"></td>
</tr>
<tr class="inputcontainer" id="trade_mods" data-group="tradeTo" data-component="3">
    <td class="label">Mod:</td>
    <td class="input"><select name="trade_mod" data-source="mod"></td>
    <td class="check"></td>
    <td class="errormessage"></td>
</tr>

它逻辑上将具有相同data-group的所有元素组合在一起，使它们属于同一个类然后它只显示data-component是初始选择选项的value的元素。

我在页面上为所有表单执行的JS片段（HTML代码也嵌入在表单中）：

function preprocess(form) {
    //...
    $(form).find("select").each(function() {
        var deferred = $.Deferred();
        promises.push(deferred.promise());

        deferred = refreshSelect($(this), deferred);

        var select = $(this);
        var argument = $(this).data("argument");
        if (typeof argument !== 'undefined') {
            $(document).on("change", "#" + argument, function(event) {
                refreshSelect($(select));
            });
        }

        var group = $(this).data("group");
        if (typeof group !== 'undefined') {
            $(form).find("*[data-group='" + group + "'][data-component]").hide();
            $(form).find("*[data-group='" + group + "'][data-component=" + $(select).val() + "]").show();
            $(document).on("change", select, function(event) {
                $(form).find("*[data-group='" + group + "'][data-component]").hide();
                $(form).find("*[data-group='" + group + "'][data-component='" + $(select).val() + "']").show();
            });
        }
    });
}

在底部，我执行了我的逻辑，它实际上工作正常，但它触发太多，请注意以下几行：

$(document).on("change", select, function(event) {

我应该将选择器传递给.on()函数而不是对象，但是我怎么知道我需要传递哪个选择器？

错误的行为是，它会触发所有 select更改，而不仅仅是指定的更改。

jQuery .on（）不按我的意思行事

0 个答案: