javascript - 奇怪的javascript问题

Question

请看看这个小提琴

http://jsfiddle.net/Qstuw/7/

当您进入页面时，默认选择第一个答案。尝试选择第二个答案。然后返回第一个并再次选择它。我不明白我错过了什么，但我无法再次选择第一个答案。有什么建议吗？

更新

根据第一个答案：

真正的答案必须在答案之间“切换”。就像在 SO 上一样。当您单击某个活动按钮时，必须启用所有其他按钮，并且必须禁用您单击的按钮。仅在您单击的答案上出现绿色边框

Answer 1

检查这个UPDATED FIDDLE。我已经进行了必要的更改以使其正常工作。您正在缓存对象并在更改选择时为它们分配新元素

//

 AnswerDiv.on("click", ".NotSelectedAnswer", function(){
        $(this).button("disable");
        NotSelectedAnswerBtn= $(".NotSelectedAnswer");
        SelectedAnswerBtn= $(".SelectedAnswer");
        SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
        NotSelectedAnswerBtn.removeClass("NotSelectedAnswer").addClass("SelectedAnswer").button("disable");
        $("div.Answer[data-id="+SelectedAnswerBtn.data("id")+"]").toggleClass("SelectedDiv");
        $("div.Answer[data-id="+$(this).data("id")+"]").toggleClass("SelectedDiv");
    })

还要确保最初将 var 分配给局部变量。这是一个很好的做法。

Answer 2

您没有重新声明按钮。应该让你更接近

AnswerDiv.on("click", ".NotSelectedAnswer", function(){
    $(this).button("disable");

    SelectedAnswerBtn.removeClass("SelectedAnswer").addClass("NotSelectedAnswer").button("enable");
    $("div.Answer[data-id="+SelectedAnswerBtn.data("id")+"]").toggleClass("SelectedDiv");
    $("div.Answer[data-id="+$(this).data("id")+"]").toggleClass("SelectedDiv");

    NotSelectedAnswerBtn=$(".NotSelectedAnswer");
    NotSelectedAnswerBtn.button('enable');
SelectedAnswerBtn=$(".SelectedAnswer");
AnswerDiv=$("div.Answer");
})