JQuery具有類的功能

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.'); 
     } 
    }); 
});