奇怪的JavaScript问题

时间:2012-09-07 22:34:28

标签: javascript jquery jquery-ui

请看一下这个小提琴

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

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

更新

基于第一个答案:

真正的答案必须在答案之间“切换”。喜欢SO。单击某个活动按钮时必须启用所有其他按钮,并且必须禁用您单击的按钮上的按钮。绿色边框仅适用于您点击的答案

2 个答案:

答案 0 :(得分:2)

检查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分配给局部变量。这是一个很好的做法。

答案 1 :(得分:1)

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

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");
})