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は、タイマーと見なされる 2 番目のパラメーターを渡すことをサポートしていませんが、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クラスを削除する前の遅延の引数は受け入れません。
で何をしようとしているのかわかりませんが、呼び出しの中でbeforespliceを忘れたというエラーが 1 つあります。$('.drop-box.spellword')splice()

于 2012-08-24T11:24:34.507 に答える
0

jQuery の removeClass はタイムアウトの引数を受け入れないため、javascript の setTimeout 関数を使用する必要があります。
また、removeClass は一度に 1 つのクラスしか削除しないため、それらをチェーンする必要があります。

これを置き換えてみてください：

$('.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 に答える