javascript - jQuery 点击事件和设置超时

Question

您可以通过下面的 github 页面链接访问完整代码。 Link

我正在开发配对游戏 当我单击每个 li 选择器时，li 的类将会更改，以便它可以更改卡打开。但我想让它在2秒后，li选择器的类将改变类。

$(document).ready(function () {
    $(".card").each(function () {
        $(this).click(function () {
            $(this).addClass("card open show"); // When click li element class will change to card open show
            setTimeout(function(){
                $(".card open show").addClass("card");
            }, 2000);
        });
    });
});

当我点击 li 选择器时，类将更改为 card open show，我想在 2 秒后将其更改为 card。

我不知道为什么它不起作用。

Answer 1

您需要使用 $().removeClass() 从元素中删除该类

将 $(".card open show").addClass("card"); 更改为

 $(this).removeClass("open show");

而且不需要迭代元素。可以直接给元素附加点击事件

$(document).ready(function () {
 $(".card").click(function () {
    // since element already have class card, no need to add same class again
    // only add the open and show class
    $(this).addClass("open show");
    setTimeout(function () {
      $(this).removeCLass(" open show");
    }, 2000);
  });

});