javascript - 如果 hasClass 条件 jquery 无法正常工作

Question

我试图用 jquery 语句的一些 onclick 事件和条件来执行一些警报。但事件处理程序似乎无法正常工作，可能是由于我的事件处理逻辑中缺少某些内容。我只有 1 个按钮，id 为 #bottone1，还有一些菜单按钮，id 为 #b1 和 #b2。

第一个事件工作正常，它正确添加了类“cliccatoInvoca1_OnReady”。当我点击#bottone1时，它会启动第一个警报“cliccatoInvoca1_OnReady”。此外，onClick 事件 $("#b1") 工作正常，它删除了类“cliccatoInvoca1_OnReady”并替换为类“cliccatoInvoca1”。

这一点我遇到了第一个问题

当我点击#bottone1时，它会出现第一个警报“cliccatoInvoca1_OnReady”，然后是“cliccatoInvoca1”。然后，当我单击 #b2 并单击 #bottone1 时，它会执行 3 个警报，“cliccatoInvoca1_OnReady”、“cliccatoInvoca1” ”，最后是“cliccatoInvoca3”。

所以，主要问题是如果条件一次只执行 1 个警报，它就不起作用。因此，当我单击 #bottone1 时，它会按顺序执行所有警报。

这是我的 document.ready 函数

$(document).ready(function () {
    $("#select-1").multiselect();
    invoca1();
    $("#bottone1").addClass("cliccatoInvoca1_OnReady btn btn-default");
    if ($("#bottone1").hasClass("cliccatoInvoca1_OnReady")) {
        $("#bottone1").click(function () {
            alert("cliccatoInvoca1_OnReady");
            keys = [];
            $('input[name="multiselect_select-1"]:checked').each(function () {
                keys.push(this.value);
            });
        });
    }

    $("#b1").click(function () {
        invoca1();
        $("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
        if ($("#bottone1").hasClass("cliccatoInvoca1")) {
            $("#bottone1").click(function () {
                alert("cliccatoInvoca1");
                keys = [];
                $('input[name="multiselect_select-1"]:checked').each(function () {
                    keys.push(this.value);
                });
            });
        }
    });

    $("#b2").click(function () {
        invoca3();
        $("#bottone1").removeClass("cliccatoInvoca1").addClass("cliccatoInvoca3");
        if ($("#bottone1").hasClass("cliccatoInvoca3")) {
            $("#bottone1").click(function () {
                alert("cliccatoInvoca3");
                keys = [];
                $('input[name="multiselect_select-1"]:checked').each(function () {
                    keys.push(this.value);
                });
            });
        }
    });
});

Answer 1

更改为使用委托(delegate)事件处理程序，附加到不变的祖先元素，每个处理程序都有一个匹配的选择器:

例如像这样:

$(document).on('click', "#bottone1.cliccatoInvoca1_OnReady", function() {
    alert("cliccatoInvoca1_OnReady");
    keys = [];
    $('input[name="multiselect_select-1"]:checked').each(function () {
         keys.push(this.value);
    });
});

以上内容现在是一键单击处理程序所需的全部内容，对其可以拥有的其他类重复该模式。您永远不需要 hasClass 检查。

您的其他代码变得简单，如下所示:

$("#b1").click(function () {
     invoca1();
     $("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
 });

委托(delegate)处理程序:

• 委托(delegate)事件处理程序通过监听事件(在本例中为click)来向上冒泡到祖先元素来工作。
• 您通常会选择最接近的不变祖先元素，但如果没有其他更接近/方便的元素，则 document 是默认值。请勿使用 'body'，因为它存在与样式相关的错误，可能会导致鼠标事件无法向其冒泡。
• 然后它将 jQuery 选择器仅应用于气泡链中的元素。
• 然后仅将函数应用于导致事件的匹配元素。
• 结果是元素只需要在事件时间匹配，而不是事件注册时间。

此模式将显着简化您的代码。

整个示例将变成这样:

$(document).ready(function () {
    $("#select-1").multiselect();
    invoca1();
    $("#bottone1").addClass("cliccatoInvoca1_OnReady btn btn-default");

    $("#b1").click(function () {
        invoca1();
        $("#bottone1").removeClass("cliccatoInvoca1_OnReady noClass").addClass("cliccatoInvoca1");
    });

    $("#b2").click(function () {
        invoca3();
        $("#bottone1").removeClass("cliccatoInvoca1").addClass("cliccatoInvoca3");
    });

    $(document).on('click', "#bottone1.cliccatoInvoca1", function () {
        alert("cliccatoInvoca1");
        keys = [];
        $('input[name="multiselect_select-1"]:checked').each(function () {
            keys.push(this.value);
        });
    });

    $(document).on('click', "#bottone1.cliccatoInvoca3", function () {
        alert("cliccatoInvoca3");
        keys = [];
        $('input[name="multiselect_select-1"]:checked').each(function () {
            keys.push(this.value);
        });
    });
});

注释:

• 我忽略了这样一个事实:您的事件处理程序包含相同的代码，并假设实际代码具有不同的操作。