7

私はjQueryは初めてですが、他のいくつかの言語には精通しています。最近、クイズ タイプのスクリプトを購入し、各質問に 15 秒の簡単なタイマーを追加しようとしています。楽しいクイズですので、ユーザーが JavaScript をいじって時間を増やしたりする心配はありません。

基本的に、ユーザーが 15 秒以内に質問を選択しない場合、自動的に次の質問に進み、タイマーが最初からやり直します。

回答には.nextタグがあり、選択すると、次のコードが示すように次の質問に移動します (うまくいけば)。

superContainer.find('.next').click(function () {

            $(this).parents('.slide-container').fadeOut(500, function () {
                $(this).next().fadeIn(500)
            });

            return false
});

私が抱えている問題は、 を使用する場合setInterval、適切な div を再度選択してフェードアウトし、次の div にフェードインする方法がわからないことです。私は以下のコードといくつかの同様のくだらないアイデアを試しましたが、うまくいきませんが、私が求めているものについてより良いアイデアが得られるかもしれません.

superContainer.find('.next').click(function () {

    $active_count = $count;

    countInterval = setInterval(function() {
                $active_count--;
                if($active_count <= 0){
                    clearInterval(countInterval);
                    $active_count = $count;
                    $(this).parents('.slide-container').fadeOut(500, function () {
                        $(this).next().fadeIn(500)
                    });
                }
                $('.question-timer').html($active_count);
            }, 1000);

            $(this).parents('.slide-container').fadeOut(500, function () {
                $(this).next().fadeIn(500)
            });

            return false
});

私は JQuery を 1 日か 2 日しか使っていないので、明らかな間違いや悪いコードは許してください。他のコードや情報が必要な場合はお知らせください

4

2 に答える 2

3

これは、最初の jQuery プロジェクトにとってはやや難しい作業です。

(このソリューションの) コツはgoNext、2 つの方法で呼び出すことができる関数を除外することです。クリック イベントに応答して、setTimeout()ではなく15 秒に応答しますsetInterval()。

$(function(){
    var questionTimeout = null;

    function goNext($el) {
        clearTimeout(questionTimeout);
        var $next = $el.next();
        $el.fadeOut(500, function() {
            if($next.length > 0) {
                $next.fadeIn(500, function() {
                    questionTimeout = setTimeout(function() {
                        goNext($next);
                    }, 15000);
                });
            }
            else {
                afterLastQuestion();
            }
        });
    }
    function afterLastQuestion(){
        alert("last question complete");
        $start.show();
    }

    var $superContainer = $("#superContainer").on('click', '.next', function() {
        goNext($(this).closest('.slide-container'));
        return false;
    });

    var $start = $("#start").on('click', function(){
        $(this).hide();
        $superContainer.find(".slide-container")
            .eq(0).clone(true,true)
            .prependTo(superContainer)
            .find(".next").trigger('click');
        return false;
    });
});

デモ

このプロセスは「開始」リンクをクリックすることで開始され、最初の質問が複製され、続いて複製の「次へ」リンクがシミュレートされてクリックされます。これにより、(実際の) 最初の質問が他のすべての質問とまったく同じように処理されます。

関数も入れましたafterLastQuestion()。最後の質問に回答した後 (またはタイムアウトした後) に必要なことを行うようにアクションを変更します。

于 2012-08-25T05:05:32.277 に答える
0

現在の質問を変数に保持し、nextクリックとタイマーでリセットすることができます。

var $current;
superContainer.find('.next').click(function (e) {

    e.preventDefault();
    $(this).parents('.slide-container').fadeOut(500, function () {
        $(this).next().fadeIn(500);
        $current = $(this).next();
    });

});​

next初期化時に最初の質問に設定するだけで済み、クリックでタイマーをリセットすることを忘れないでください

また、通常e.preventDefault()は よりもを使用することをお勧めしますreturn false。

于 2012-08-25T01:57:20.807 に答える