javascript - 点击功能 react 错误

Question

我有四个选项，如果有人选择一个选项并单击“nästa”，则答案应该存储到一个数组中。为了确保该值已被存储，我警告了数组的长度。但是，如果我单击“Visa alla alternativ”并选择另一个问题，然后再次单击“nästa”，长度将增加一。

1. 第一次尝试:警报将显示 1
2. 第二次尝试:警报将显示 1，并且新的警报窗口将显示 显示2。
3. 第三次尝试:将显示 1 ,2 ,3。

为什么会发生这种情况？

Javascript:

var 答案=[];

$(".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/