条件语句混淆 - If 3 显示元素答案

【问题标题】：Conditional statement confusion - If 3 show element条件语句混淆 - If 3 显示元素
【发布时间】：2017-04-13 11:01:40
【问题描述】：

我正在尝试编写一个允许我的用户选择 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);
    }

} );

【问题讨论】：

标签： javascript jquery logic conditional

【解决方案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

【讨论】：