条件语句混淆——If 3显示元素

Question

我正在尝试编写一个允许我的用户 select 3 个元素的函数，一旦 select 编辑了 3 个元素，就会出现一个 "next" 按钮。

然后应该允许我的用户删除select一个答案和select另一个，在删除select时下一个按钮应该淡出，因为现在只有2个元素selected.

我正在努力使它有效地工作...

$('.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

条件语句混淆——If 3显示元素

Conditional statement confusion - If 3 show element

javascript

jquery

logic

conditional