我是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项目来说,这是非常棘手的.
诀窍(在此解决方案中)是分解可以以两种方式调用的goNext函数 – 响应click事件并响应15秒setTimeout(),而不是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()函数.在最后一个问题得到解答(或超时)后,修改其动作以执行必要的操作.
