Question

我正在进行基于网络的测验。当我按下一个答案时，我希望顶部的计数改为下一个，但是它一直跳过一个数字，跳到下一个数字（e.i.从I到III，而不是I到III）。我做错了什么？

网站：http://www.carlpapworth.com/friday-quiz/#

HTML：

<ul id="count">
                <li><h4>I</h4></li>
                <li><h4>II</h4></li>
                <li><h4>III</h4></li>
                <li><h4>IV</h4></li>
                <li><h4>V</h4></li>
                <li><h4>VI</h4></li>
                <li><h4>VII</h4></li>
                <li><h4>VIII</h4></li>
                <li><h4>IX</h4></li>
                <li><h4>X</h4></li>
</ul>

JS：

  $('#count li:first').addClass('cCurrent');
        $('.qAnswers li a').click(qNext);
        function qNext(){
          $('.cCurrent').next('#count li').addClass('cCurrent');
          $('.cCurrent:first').removeClass('cCurrent'); 
        }

Answer 1

js/custom.js中的<head>脚本被提及两次。您应该删除其中一个，否则点击事件将被注册两次。

此外，.next()内的表达看起来有些奇怪（你不需要#count，甚至可能不li），函数本身可以简化为这样：

function qNext()
{
    $('#count .cCurrent')
        .removeClass('cCurrent')
        .next('li')
        .addClass('cCurrent');
}

删除当前突出显示的<li>的类，然后移至下一个<li>并在那里应用cCurrent类。

最后，你不应该给你的答案一个给出答案正确或错误的课程。你的答案是这样的：

<a href="#" class="qWrong">xxx</a>
<a href="#" class="qCorrect">xxx</a>

如果有人会查看来源，那么点击该内容将非常明显。

Answer 2

我的javascript中没有看到任何错误，但您的HTML页面包含两次相同的脚本。如果点击事件已注册两次，则可能会导致您的问题。

<script type="text/javascript" src='js/custom.js'></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src='js/custom.js'></script>

Answer 3

我不熟悉jquery细节，但我会通过添加一些跟踪，inna精神来调试它：

function qNext(){
    // Output data on what is your current question
    $('.cCurrent').next('#count li').addClass('cCurrent');
    // Output something - so you know for sure that this is the line that does the double move
    $('.cCurrent:first').removeClass('cCurrent'); 
}

你也可以尝试：

function qNext(){
    // Output ...
    $myObject = $('.cCurrent');
    // Output ...
    $myObject2 = $myObject.next('#count li');
    // Output ...
    $myObject2.addClass('cCurrent');
    // Output ...
    $('.cCurrent:first').removeClass('cCurrent'); 
}

Answer 4

qnext功能正常工作

我认为问题是还有另一个点击事件，它也会向右滑动一个问题，通过滑块（ulslide）添加到答案中。尝试注释掉这一行并查看它是否有效

nextButton: '.qAnswers a',

.next（）跳过两步而不是一步，出了什么问题？

4 个答案: