條件語句混淆 - 如果3顯示元素

Question

我正在嘗試編寫一個函數，允許我的用戶選擇3個元素，一旦選擇了3個元素，就會出現一個「下一個」按鈕。

然後我應該允許我的用戶取消選擇一個答案並選擇另一個，取消選擇下一個按鈕應該淡出，因爲現在只有2個元素被選中。

林努力讓這方面的工作效率......

https://jsfiddle.net/p7uhf12L/

$('.answer').on('click',function(e){ 
    e.preventDefault(); 

    if($('.moreAnswers .selected').length === 3){ 
     $('.next-question').fadeIn(); 
     $('.next-question').css('opacity',1); 
     if($(this).is('.selected')){ 
      $(this).removeClass('selected'); 
     } 
    } else { 
     if($(this).is('.selected')){ 
      $(this).removeClass('selected'); 
      $('.next-question').css('opacity',0); 
     } else { 
      $(this).addClass('selected'); 
     } 
     $('.next-question').fadeOut(); 
     $('.next-question').css('opacity',0); 
    } 

    if($('.moreAnswers .selected').length === 3){ 
     $('.next-question').fadeIn(); 
     $('.next-question').css('opacity',1); 
    } else { 
     $('.next-question').fadeOut(); 
     $('.next-question').css('opacity',0); 
    } 

}); 

Answer 1

可以簡化你這樣的代碼：

$('.answer').on('click',function(e){ 
    e.preventDefault(); 

    var selected = $('.moreAnswers > .selected').length; 

    if(selected == 3){ //if selected is 3 we focus on just deselecting 
     if($(this).is('.selected')){ //deselcted and remove links 
     $(this).removeClass('selected'); 
     $('.next-question').fadeOut(); 
      $('.next-question').css('opacity',0); 
     } 
    }else{ //toggle and check if this was the 3rd one 
     if($(this).is('.selected')){ 
      $(this).removeClass('selected'); 
     } else { 
      $(this).addClass('selected'); 
      if(selected == 2){ 
      $('.next-question').fadeIn(); 
      $('.next-question').css('opacity',1); 
     } 
      } 
    } 
}); 

樣品FIDDLE