反应错误的点击功能

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/