请看一下这个小提琴
当您进入页面时,默认选择第一个答案。尝试选择第二个答案。然后返回到1st并再次选择它。我不明白我错过了什么,但我无法再次选择第一个答案。有什么建议吗?
基于第一个答案:
真正的答案必须在答案之间“切换”。喜欢SO。单击某个活动按钮时必须启用所有其他按钮,并且必须禁用您单击的按钮上的按钮。绿色边框仅适用于您点击的答案
答案 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");
})