重新绑定一个点击事件/在两个元素之间切换，简单的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) { 
} 

对于额外的信贷分配，所有的点击处理程序的东西了移动到一个单独的函数，然后调用一个函数从两个点击处理程序，而不是复制所有的代码同时。祝你好运！