Question

在我的拼写游戏中，有一个带拼写单词的网格。用户在网格中有一个突出显示的区域，一些线索如图片和一个单词的声音，例如“猫”。

然后，用户应该单击网格侧面的相应字母以获得正确的答案。

如果用户正确拼写单词，则单词淡出以显示后面图像的一部分。游戏的目的是正确拼写所有单词并显示整个图像

如果用户的单词拼写错误，则会对该单词应用一种样式，使其呈红色亮起，然后应在2秒后淡出，并且应该再次尝试拼写单词

目前，当一个单词拼写不正确时，该样式会使该单词发出红光，但在2秒后它不再显示，并且不会再向用户发出该单词。

我已经使用这行代码在2秒后摆脱了样式......

$('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4', "2000");

由于某种原因，它不起作用

添加样式的脚本在这里......

if (!$('.drop-box.spellword:not(.occupied)').length) {
            var wordIsCorrect = 0;
            $('.drop-box.spellword').each(function() {
                if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) {
                    wordIsCorrect++;
                }
            });
            console.log(wordIsCorrect);
            console.log($('.drop-box.spellword').length);
            if ($('.drop-box.spellword').length == wordIsCorrect) {

                $('.drop-box.spellword').addClass('wordglow2');
                $(right).val('Well Done!');
                $(right).show();
                audioS.play();
                $('.counter').html(completeWords + '/6').show();
                $(wrong).hide();
                $('.minibutton').prop('disabled', false);

            } else {

                $('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
                $(wrong).val('Try Again');
                $('.minibutton').prop('disabled');
                $(wrong).show();
                audioF.play();
                $('.counter').html(completeWords + '/6').show();
                $(right).hide();
                $('.minibutton').prop('disabled', true);   

            }

为了给用户另一次尝试，我认为你可能会使用这样的东西..

$('.drop-box.spellword').splice(0, $('.drop-box.spellword').length);

Answer 1

jQuery的removeClass不支持传递第二个参数作为计时器，但您可以使用setTimeout（）手动执行此操作：

setTimeout(function() {
    $('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4');
}, 2000);

至于给用户另一次尝试，你为什么要使用splice()？是不是每个元素都有类drop-box.spellword一个带有单个字符串的文本输入？在这种情况下，您可以使用$('.drop-box.spellword').val('')清除该类的所有输入。

修改

要从其他孩子中删除这些类，请将其修改为以下内容：
。
$（”。落box.spellword '）removeClass（' wordglow4' ）; $（ '落box.spellword '）。孩子（'。UI-插件内容 '）。removeClass（' wordglow'）

jsFiddle非常大，所以我不确定wordglow3在哪里被应用，但原理是相同的，从你的定时函数中找到元素和removeClass（），都在你的定时函数中。

Answer 2

要在2秒后删除课程，请使用：

setTimeout(function(){
  $('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4')
},2000)

在删除课程之前，

removeClass不接受任何延迟参数我不确定您要对splice做什么，但我可以看到的一个错误是您在$来电中('.drop-box.spellword')之前忘记了splice()

Answer 3

你必须使用javascript的setTimeout函数，因为jQuery的removeClass不接受超时的参数。
此外，removeClass当时只删除一个类，因此您必须将它们链接起来。

尝试替换它：

$('.drop-box.spellword').removeClass('wordglow wordglow3 wordglow4', "2000");

为此：

setInterval(
   function(){
       $('.drop-box.spellword').removeClass('wordglow').removeClass('wordglow3').removeClass('wordglow4');
   }, 2000
);

给用户第二次尝试

3 个答案: