Question

我是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以使其淡化我的淡入淡出下一个。我已经尝试了下面的代码和一些类似的混乱想法，但它不起作用，但也许它会更好地了解我所追求的是什么。

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，所以请原谅任何明显的错误和错误的代码！如果您需要任何其他代码或信息，请告诉我

Answer 1

对于第一个jQuery项目来说，这是非常棘手的。

诀窍（在此解决方案中）是分解可以通过两种方式调用的goNext函数 - 响应单击事件并响应15秒setTimeout()，而不是{ {1}}。

setInterval()

DEMO

通过单击“开始”链接启动该过程，导致克隆第一个问题，然后在克隆的“下一个”链接上进行模拟点击。这确保了（实际）第一个问题的处理方式与所有其他问题完全相同。

我还添加了$(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; }); });功能。在最后一个问题得到解答（或超时）后，修改其动作以执行必要的操作。

Answer 2

您可以将当前问题保存在变量中，将其重置为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。

如果定时器达到0，则添加测验定时器，淡出/跳到下一个

2 个答案: