javascript - 在点击处理程序中调用函数，而不是运行

Question

问题

我正在调用函数resetSelection，该函数应该删除.is-active类并将is-inactive类添加到列表中单击提交按钮 .btn--submit 后，曲棍球运动员的信息等。

现在，.is-active 类仍保留在所选玩家上，并且该函数未运行？

index.html

<button class="btn btn--submit"><img src="src/img/ballot-alt.png" class="image--ballot">Submit Vote</button>

脚本.js

function resetSelection() {
    $(".btn--reset").on("click", function(){
        $(".picked").removeClass("is-active");
        $(".picked").addClass("is-inactive");
        $(".icon-checkmark").removeClass("is-completed");
        $(".btn--submit").hide();
        $(".btn--submit").removeClass("slideLeft");
        starredGoaltenders = 0;
        starredDefencemen = 0;
        starredForwards = 0;
        console.log(starredGoaltenders, starredDefencemen, starredForwards);
    });
} resetSelection();

$(".btn--submit").on("click", function(){
    console.log("Clicked");
    resetSelection();
});

Answer 1

您的函数将点击处理程序事件绑定(bind)到 btn--reset 类的元素。考虑重构 resetSelection 以包含该事件处理程序中的逻辑，而不是事件处理程序本身:

function resetSelection() {
    $(".picked").removeClass("is-active");
    $(".picked").addClass("is-inactive");
    $(".icon-checkmark").removeClass("is-completed");
    $(".btn--submit").hide();
    $(".btn--submit").removeClass("slideLeft");
    starredGoaltenders = 0;
    starredDefencemen = 0;
    starredForwards = 0;
    console.log(starredGoaltenders, starredDefencemen, starredForwards);
}

$(".btn--reset").on("click", resetSelection);

$(".btn--submit").on("click", function(){
    console.log("Clicked");
    resetSelection();
});