在单击处理程序内部调用函数，但未运行

Calling a function inside click handler, not running

本文关键字：运行 函数 调用 单击 处理 程序 内部      更新时间：2023-09-26

问题

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

现在，.is-active类保留在选定的播放器上，并且函数不运行？

index.html

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

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

您的函数将单击处理程序事件绑定到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();
});

reselectSelection()函数包含.btn--reset的单击事件处理程序。删除该处理程序，它应该对您有效，因为您希望在单击.btn--submit时触发重置函数。

相关文章：