Question

我正在尝试编写一个允许我的用户选择3个元素的函数，一旦选择了3个元素，就会出现“下一个”按钮。

然后我的用户应该被允许取消选择一个答案并选择另一个答案，取消选择下一个按钮应该淡出，因为现在只有2个元素被选中。

我努力让这项工作有效...

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

条件语句混淆 - 如果3显示元素

1 个答案: