0

在我的拼写游戏中，有一个网格，里面有要拼写的单词。用户会在网格中获得一个突出显示的区域以及一些线索，例如图片和诸如“猫”之类的单词的声音。

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

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

如果用户拼写错误的单词，则应用了一种样式使其呈红色发光，然后应在 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);
4

3 回答 3

0

jQuery 的removeClass不支持将第二个参数视为计时器，但您可以使用 setTimeout() 手动执行此操作：

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

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

编辑：

要从其他子项中删除类，请将其修改为以下内容：

$('.drop-box.spellword').removeClass('wordglow4'); $('.drop-box.spellword').children('.ui-widget-content').removeClass('wordglow')

jsFiddle 真的很大，所以我不确定 wordglow3 应用在哪里，但原理是一样的，找到元素并从中 removeClass()，都在你的定时函数中。

于 2012-08-24T11:24:30.607 回答
0

要在 2 秒后删除该类，请使用以下命令：

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

removeClass在删除课程之前不接受任何关于延迟的论点。
我不确定您要对 执行什么操作，但是我可以看到的一个错误是您在通话splice中忘记了$before 。('.drop-box.spellword')splice()

于 2012-08-24T11:24:34.507 回答
0

您必须使用 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
);
于 2012-08-24T11:25:51.497 回答