Javascript 通过增加一个变量来更改href目标

我正在做一个测验，这个测验有一个计时器。当计时器结束时，它将触发使用href作为目标的scrollLeft动画。为了解决它总是以第一个

.qAnswers li a

为目标的问题，我尝试使用一个变量来更改href目标的名称。 嗯，它似乎没有按计划工作，我做错了什么

以下是该项目的链接：

HTML:

问题一







问题二







问题三

JS:

//计时器//
函数timesUp（）{
$（'timerBar'）。动画（{'width'：'0px'}，7000，function（）{
下一个问题（函数（）{
重置计时器（）；
}); 
});                 
}
var hrefURL='#q'；
var-hrefData=2；
$（'.qAnswers a:first'）.attr（'href'，hrefur+hrefData）；
函数nextQuestion（事件）{
var$anchor=$（'.qAnswers a:first'）；
$（'#qWrap'）。停止（true，true）。设置动画({
滚动左：$（$anchor.attr（'href'））.position（）.left
}，2000，函数（）{
nextCount（）；
hrefData++；
});
}

最后！我找到了自己问题的答案：
var hrefURL='#q'；
var-hrefData=2；
$（'.qAnswers a:first'）.attr（'href'，hrefur+hrefData）；
函数nextQuestion（事件）{
var$anchor=$（'.qAnswers a:first'）；
$（'#qWrap'）。停止（true，true）。设置动画({
滚动左：$（$anchor.attr（'href'））.position（）.left
}，2000，函数（）{
nextCount（）；
hrefData++；
$（'.qAnswers a:first'）.attr（'href'，hrefur+hrefData）；
});
}

很抱歉，我觉得我可能可以帮你解决这个问题，但我不明白到底是什么错了，以及你到底想实现什么。如果计时器倒计时，你想让它回到开始吗？对不起，不，我想要的是启动动画。它第一次工作（将

#qWrap

滚动到id为“'#qN'）的下一个li.qContainer，但是动画一直在

处触发，因为它总是以第一个

.qAnswer a

为目标。我解决这个问题的方法是为#qN（N是hrefData）创建一个变量，从而每次增加一个变量，使其指向下一个

。如果人们在这个测验中不作弊很重要（我假设是这样），我不会使用类来表示正确答案和错误答案，每个现代浏览器都可以轻松地打开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>

//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  -->

            });

}