[英]change href-target by incrementing a variable
I am working on a quiz, this quiz has a timer. 我正在做一个测验,这个测验有一个计时器。 When the timer ends it fires a scrollLeft animation that uses a href as target.
计时器结束时,它将触发使用href作为目标的scrollLeft动画。 What I am trying to do, to come around the problem that it always targets the first
.qAnswers li a
is to use a variable to change the name of the href-target. 为了解决始终以第一个
.qAnswers li a
对象为目标的问题,我正在尝试使用一个变量来更改href目标的名称。 Well, it doesn't seem to be working as planned, what am I doing wrong? 好吧,这似乎没有按计划进行,我在做什么错?
Here's a link to the project: http://www.carlpapworth.com/friday-quiz/# 这是该项目的链接: http : //www.carlpapworth.com/friday-quiz/#
HTML: HTML:
<div id="qWrap">
<ul id="qBox">
<!--Q1--> <li id="q1" class="qContainer">
<div class="qQuestion">Question I </div>
<ul class="qAnswers">
<li><a href="#q2" class="aWrong"><h3>Answer a</h3></a></li>
<li><a href="#q2" class="aCorrect"><h3>Answer b</h3></a></li>
<li><a href="#q2" class="aWrong"><h3>Answer c</h3></a></li>
</ul>
</li>
<!--Q2--> <li id="q2" class="qContainer">
<div class="qQuestion">Question II </div>
<ul class="qAnswers">
<li><a href="#q3" class="aWrong"><h3>Answer 1</h3></a></li>
<li><a href="#q3" class="aWrong"><h3>Answer 2</h3></a></li>
<li><a href="#q3" class="aCorrect"><h3>Answer 3</h3></a></li>
</ul>
</li>
<!--Q3--> <li id="q3" class="qContainer">
<div class="qQuestion">Question III </div>
<ul class="qAnswers">
<li><a href="#q4" class="aWrong"><h3>Answer 1</h3></a></li>
<li><a href="#q4" class="aWrong"><h3>Answer 2</h3></a></li>
<li><a href="#q4" class="aCorrect"><h3>Answer 3</h3></a></li>
</ul>
</li>
</ul>
</div>
JS: JS:
//timer//
function timesUp(){
$('#timerBar').animate({'width':'0px'}, 7000, function(){
nextQuestion(function(){
resetTimer();
});
});
}
var hrefURL = '#q';
var hrefData = 2; <!-- VARIABLE -->
$('.qAnswers a:first').attr('href', hrefURL + hrefData);
function nextQuestion(event){
var $anchor = $('.qAnswers a:first');
$('#qWrap').stop(true, true).animate({
scrollLeft: $($anchor.attr('href')).position().left
}, 2000, function(){
nextCount();
hrefData++; <!-- INCREASE VARIABLE -->
});
}
FINALY! I found the answer to my own problem:
var hrefURL = '#q';
var hrefData = 2;
$('.qAnswers a:first').attr('href', hrefURL + hrefData);
function nextQuestion(event){
var $anchor = $('.qAnswers a:first');
$('#qWrap').stop(true, true).animate({
scrollLeft: $($anchor.attr('href')).position().left
}, 2000, function(){
nextCount();
hrefData++;
$('.qAnswers a:first').attr('href', hrefURL + hrefData); <!-- I need to fire this again for the hrefData++; to be applied -->
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.