2

私はクイズに参加しています。4 つの回答の可能性から答えを選ぶことができます (誰が億万長者になりたいかなど)。質問ごとに7秒のカウンターを追加したいのですが、カウンターが終了すると、次の質問へのボタンが表示されるはずです。

私はすでに jQuiz を使用した基本的なコードを持っていますが、私の問題は、常に同じカウンター インスタンスを使用することです。したがって、最初の質問のタイマーは問題ありませんが、次の質問に答えて最初の質問の時間が残っている場合は、両方のカウンターが同時に表示されます。複数のタイマーインスタンスがあれば問題は解決すると思いますが、これを行う方法がわかりません。

ここに私のコード。悪い構造について申し訳ありません。私はjQueryの初心者です。

$('.btn, .nxt').click(function(){
    $(this).addClass("checked");
    next(this);
    var el = $('#progress');
    el.width(el.width() + 116 + 'px');
});

function next(elem){
    $(elem).parents('.questionContainer').fadeOut(300, function(){
        var interval = window.setInterval(function() {
            var counter = 0;
            clearInterval(interval);
        });
        var counter = 0;

        timer();
        $(elem).parents('.questionContainer').next().fadeIn(300); 
        $('.nxt').hide();
    });
};

function timer(){
    var counter = 7;
    var interval = window.setInterval(function() {
        counter--;
        $(".counter").html(counter);
        if (counter == 0) {
            $(".counter").html('');
            $('.nxt').show();
            clearInterval(interval); 
        }
    }, 1000);    
};​
4

1 に答える 1

2

私はStackoverflowを初めて使用し、このテキストエリアのコードを編集するのは難しすぎます...修正されたJSをjsfiddleに追加しました。

同じフィドルにHTMLを追加して、JSをテストしてみてください。うまくいくことを願っています。

構造（主に選択範囲をキャッシュする）に関するいくつかの修正と、要求していたタイマー用の追加された配列（コメント付き）があります。

HTMLを追加すると、デバッグが簡単になります:)

var quizObj = {
    quizTimers: [], //timers array
    $counter: $(".counter"),
    $buttons: $('.btn, .nxt'),
    $progress: $('#progress'),
    next: function(elem){
         $(elem).parents('.questionContainer').fadeOut(300, function(){ 
            //clears the FIRST timer id in the timers array and removes it from array
            clearInterval(quizObj.quizTimers.shift());

            quizObj.timer();
            $(elem).parents('.questionContainer').next().fadeIn(300);
            $('.nxt').hide();
        });   
    },
    timer: function() {
        var counter = 7;
        var interval = window.setInterval(function() {
            counter--;
            $(".counter").html(counter);
            if (counter == 0) {
                $(".counter").html('');
                $('.nxt').show();
                clearInterval(interval);
            }
        }, 1000);   

        quizObj.quizTimers.push(interval);
    }
}

quizObj.$buttons.click(function(){
    $(this).addClass("checked");
    quizObj.next(this);
    quizObj.$progress.width(quizObj.$progress.width() + 116 + 'px');
});
于 2012-12-03T14:33:32.487 に答える