javascript - 条件语句混淆 - If 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