Question

我试图让我的jquiz类为每个页面计算2个ID。它只能正确计算第一页。第二页只显示与第一页相同的分数。我不确定我做错了什么

这就是我所拥有的：

JQuery的：

$(".jquiz li ul li").click(function()
{
    var count1 = 0; //page1 counter
    var count2 = 0; //page2 counter

//right answer
if ($(this).hasClass("correct")) 
{

    if ($("#page1"))
        count1++; //page1 
    if ($("#page2"))
        count2++; //page2
}

 //page1 quiz counter display   
if ($('ul.answered').length == 3) 
{
    $('#page1mark').fadeIn('slow');
    $('#page1total').html('You got a '+count1+' out of '+3+' on the page1 quiz.');
}

//page2 quiz counter display        
if ($('ul.answered').length == 6) 
{
    $('#page2mark').fadeIn('slow');
    $('#page2total').html('You got a '+count2+' out of '+3+' on the page2 quiz.');
}

HTML：注意：类jquiz位于标记元素OL中。它不会让我发布代码

   <id="page1" class="jquiz">
   pizza is yum?
   <Ii class ="correct"> true</Ii>

Answer 1

你真的错了。

您应该为每个测验执行整个代码块，将所有选择器本地化为该dom元素，或您可以在一个事件处理程序中执行此操作，但在其中查找已激活的测验首先在顶部（使用jQuery.closest('.jquiz')），并将其他所有内容限制在该dom节点内。

无论哪种方式，看起来每个测验都有不同数量的问题，所以你应该在dom中存储每个测验的问题数量，如下所示：

<ol id="page1" class="jquiz" data-questions="3">
    ....
</ol>

<ol id="page2" class="jquiz" data-questions="6">
    ....
</ol>

然后，这是使用我上面描述的第一种方法更新的javascript的示例 - 为每个测验设置单独的回调（我认为第一种方法产生更可读的代码，并且此处的效率成本可以忽略不计）。这也包含了我建议的其他上述变化：

// For each quiz...
$('.jquiz').each(function() {
    // Cache the current quiz element, limit all selectors below to this element
    var $quiz = $(this);

    // This is a local variable, so it there will be a different copy for each quiz
    var correct_answers = 0;

    // Create a callback for *this quiz*
    $quiz.find('li ul li').click(function() {
        //right answer
        if ($(this).hasClass("correct")) correct_answers++;

        //counter display   
        if ($quiz.find('ul.answered').length == $quiz.data('questions')) {
            $('#'+$quiz.attr('id')+'mark').fadeIn('slow');
            $('#'+$quiz.attr('id')+'total').html('You got a '+correct_answers+' out of '+$quiz.data('questions')+' on the '+$quiz.attr('id')+' quiz.');
        }
    });
});

此外，虽然与您的问题没有直接关系，但值得注意。看起来有人可以继续点击正确的项目以无限期地增加正确的计数。也许不是明确计算，而是让隐含计数完成工作。即使代码的其余部分阻止了发生此类事件的可能性，这可能会更好：

// For each quiz...
$('.jquiz').each(function() {
    // Cache the current quiz element, limit all selectors below to this element
    var $quiz = $(this);

    // Create a callback for *this quiz*
    $quiz.find('li ul li').click(function() {
        //counter display   
        if ($quiz.find('ul.answered').length == $quiz.data('questions')) {
            var correct_answers = $quiz.find('li ul li.correct').length;
            $('#'+$quiz.attr('id')+'mark').fadeIn('slow');
            $('#'+$quiz.attr('id')+'total').html('You got a '+correct_answers+' out of '+$quiz.data('questions')+' on the '+$quiz.attr('id')+' quiz.');
        }
    });
});

JQuery具有类的ID功能

1 个答案: