我需要单击两次才能将类添加到元素

Question

我正在尝试创建一个西蒙游戏，当用户单击按钮时我希望它具有动画效果。

我使用了 addClass 和 setTimeOut 以及removeClass，动画发生了，但我需要单击同一个按钮两次。

var buttonColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];
var userClickedPattern = [];

function playSound(name) {

    var audio = new Audio("./sounds/" + name + ".mp3");
    audio.play();

}

function nextSequence() {

    var randomNumber = Math.floor(Math.random() * 4);

    var randomChosenColour = buttonColours[randomNumber];

    gamePattern.push(randomChosenColour);

    $("#" + randomChosenColour).fadeOut(100).fadeIn(100);

    playSound(randomChosenColour);

}

function animatePress(currentColour) {

    $("." + currentColour).on("click", function () {

        $("." + currentColour).addClass("pressed");

        setTimeout(function () {

            $("." + currentColour).removeClass("pressed");

        }, 100);

    })

}

$(".btn").on("click", function () {

    var userChosenColour = this.id;

    userClickedPattern.push(userChosenColour);

    playSound(userChosenColour);

    animatePress(userChosenColour);

})

Answer 1

似乎每次单击按钮时您都在 animatePress 函数内附加了单击事件处理程序，导致后续尝试需要单击两次。 请将点击处理程序与 animatePress 函数分开，

function animatePress(currentColour) {
        $("#" + currentColour).addClass("pressed");
        setTimeout(function () {
            $("#" + currentColour).removeClass("pressed");
        }, 100);
    }
    
    // Click event listener
    $(".btn").on("click", function () {
        var userChosenColour = this.id;
        userClickedPattern.push(userChosenColour);
        playSound(userChosenColour);
        animatePress(userChosenColour);
    });