JQueryは、クラスごとにID関数を持っています

Question

私のjquizクラスに各ページの2つのIDを数えさせようとしています。 最初のページのみが正しくカウントされます。 2番目のページには、最初のページと同じスコアが表示されます。

間違って何イムイムわからないこれは私が持っているものです。

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