0

私はクイズに取り組んでいます。このクイズにはタイマーがあります。タイマーが終了すると、href をターゲットとして使用する scrollLeft アニメーションが起動します。私がやろうとしているのは、常に最初のものをターゲットにするという問題を回避する.qAnswers li aために、変数を使用して href-target の名前を変更することです。うーん、計画どおりに機能していないようですが、何が間違っているのでしょうか?

プロジェクトへのリンクは次のとおりです: http://www.carlpapworth.com/friday-quiz/#

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:

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

        });

}
4

1 に答える 1

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

            });

}
于 2013-03-12T08:43:37.897 に答える