重新綁定一個點擊事件/在兩個元素之間切換，簡單的jquery測驗

Question

所以我有點卡在我正在工作的東西;

我是全新的進Jquery的和Javascript世界，我敢肯定有一個更有效的方式來做到這一點，但現在，這是我有。

基本上，當用戶點擊一個「答案」的元素將動畫的頁面上。 有2個匹配元素的答案，如果點擊相應的'答案'，將會生成動畫。

現在，當用戶點擊一個答案多次，它繼續動畫; 我需要當用戶點擊一個答案，它只動畫一次，並停止，所以用戶要麼離開它，要麼當他們點擊另一個'答案'時，它執行動畫，但被重新綁定到重新點擊。有點像在2個答案/相應的動畫之間來回切換。

我無法重新綁定，使您能再次點擊。在循環中排序。

希望林解釋這個ok了！ 非常感謝任何能夠指引我走向正確方向的人。

這裏是JS，具有低於Im的其中FIDDLE在。

/*answer1*/ 
$('ul#quiz li:nth-child(2)').on("click", function() { 
    $(this).addClass('active'); 
    $(this).siblings().addClass('deactive'); 
    $(this).siblings().removeClass('active'); 
    $(this).removeClass('deactive'); 
    if ($('ul#quiz li:nth-child(3)').hasClass('deactive')) { 
     $('.circle2').animate({ 
      width: "80px", 
      height: "80px" 
     }); 
    } 
    if ($(this).hasClass('active')) { 
     $('.circle1').animate({ 
      width: "+=3.5%", 
      height: "+=3.5%" 
     }); 
    } 
}); 
    /*answer2*/ 
$('ul#quiz li:nth-child(3)').on("click", function() { 
    $(this).addClass('active'); 
    $(this).siblings().addClass('deactive'); 
    $(this).siblings().removeClass('active'); 
    $(this).removeClass('deactive'); 
    if ($('ul#quiz li:nth-child(2)').hasClass('deactive')) { 
     $('.circle1').animate({ 
      width: "80px", 
      height: "80px" 
     }); 
    } 
    if ($(this).hasClass('active')) { 
     $('.circle2').animate({ 
      width: "+=3.5%", 
      height: "+=3.5%" 
     }); 
    } 
    });  

FIDDLE

Answer 1

你只想要如果答案是不是已經處於激活狀態的動畫。只是包裝一切都在你的點擊處理程序

if($(this).hasClass('active') === false) { 
} 

對於額外的信貸分配，所有的點擊處理程序的東西了移動到一個單獨的函數，然後調用一個函數從兩個點擊處理程序，而不是複製所有的代碼同時。祝你好運！