反應錯誤的點擊功能

Question

我有四個選項，如果有人選擇一個選項並點擊「nästa」，答案應該存儲到一個數組中。爲了確保值已經存儲，我提醒了陣列的長度。但是，如果我點擊「Visa alla alternativ」並選擇另一個問題，再次單擊「nästa」，長度將增加1。

1. 第一次嘗試：警報將顯示1
2. 第二次嘗試：警報將顯示1個新的警告窗口將 顯示2.
3. 第三次嘗試：它會顯示1，2，3。

這是怎麼發生的？

Javascript：

var answer = [];

$(".option").on("click", click_question); 

     function click_question() { 


     $(".option").each(function() { 
      $(this).fadeTo("slow", 0.1); 
      $(this).off("click"); 
     }); 



     function store_asnwer() { 
      $("#nästa").click(function() { 
      answer.push(select); 
      alert(answer.length); 

     }); 
     } 

     $(this).fadeTo("slow", 1); 

     $("#nästa").fadeTo("slow", 1); 
     $("#visa_alternativ").fadeTo("slow", 1); 

     store_asnwer(); 

     return select = $(this).text(); 
     } 

     $("#visa_alternativ").on("click", function() { 
      $(".option").each(function() { 
       $(this).fadeTo("slow", 1); 
       $(this).on("click", click_question); 
      }); 

      answer.splice(0,1); 

      $(this).fadeTo("slow", 0.2); 
     }); 
HTML: 


<div class="option" id="option_1"> Svars alternativ_1 </div> 
<div class="option" id="option_2"> Svars alternativ_2 </div>       <div class="option" id="option_3"> Svars alternativ_3 </div> 
<div class="option" id="option_4"> Svars alternativ_4 </div> 

<div class="question_nästa" id="nästa"> Nästa </div> 
<div class="question_nästa" id="tillbaka_question"> Tillbaka </div> 
<div class="question_nästa" id="visa_alternativ"> Visa alla alternativ </div> 

感謝您的幫助！

我希望如果我能得到解決

Answer 1

您在.option元素的每次點擊附加一個單擊事件處理程序#nästa，所以將全部解僱。附加一次處理程序。當您單擊某個選項時，將其值存儲在一個變量中並將其插入到點擊功能中。

代碼：

var answer = []; 
var selected; 

$(".option").on("click", click_question); 

$("#nästa").click(function() { 
    answer.push(selected); 
    alert(answer.length); 
}); 

function click_question() { 

    $(".option").each(function() { 
     $(this).fadeTo("slow", 0.1); 
     $(this).off("click"); 
    }); 

    $(this).fadeTo("slow", 1); 

    $("#nästa").fadeTo("slow", 1); 
    $("#visa_alternativ").fadeTo("slow", 1); 

    selected = $(this).text(); 
} 

$("#visa_alternativ").on("click", function() { 
    $(".option").each(function() { 
     $(this).fadeTo("slow", 1); 
     $(this).on("click", click_question); 
    }); 

    answer.splice(0, 1); 

    $(this).fadeTo("slow", 0.2); 
}); 

演示：http://jsfiddle.net/IrvinDominin/PDc7b/