奇怪的javascript問題

Question

請看看這個小提琴

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

第一個答案是默認選擇，當你進入到頁面。嘗試選擇第二個答案。然後返回到1st並再次選擇它。我不明白我錯過了什麼，但我不能再選擇第一個答案。任何建議？

UPDATE

基於第一個答案：

真正的答案一定是答案之間 「切換」。就像這樣。當您點擊某個活動按鈕時，必須啓用所有其他按鈕，並且必須禁用您點擊的按鈕。綠色邊框僅限於您點擊的答案

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

Answer 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分配給最初的局部變量..這是一個很好的做法。