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");

也无需遍历元素。您可以将click事件直接附加到元素上

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

});

Answer 2

您可以使用$().toggleClass()在超时前后切换类：

let element = this;
$(element).toggleClass("open show");
setTimeout(function() {
  $(element).toggleClass("open show");
}, 2000);

Answer 3

假设每次单击任何一个li，它将在2秒后关闭。

$(this).click(function () {

var ele = $(this);
 $(this).addClass("open show"); 
            setTimeout(function(){
                ele.removeClass("open show");
            }, 2000);
        });

jQuery click事件和settimeout

3 个答案: