Question

我不确定如何简化多个if else语句。

我正试图遍历光滑的滑块以抓取每张幻灯片，并将其与li项目链接以显示该特定幻灯片的标题

请查看下面的代码，了解我目前的情况

$('#tab-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
    if(currentSlide === $('.tabs li.tab-1').index()) {
        $('.tabs li.tab-1').css({
            'font-weight' : 'bold',
        });
    }else {
        $('.tabs li.tab-1').css({
            'font-weight' : 'normal',
        });
    }

    if(currentSlide === $('.tabs li.tab-2').index()) {
        $('.tabs li.tab-2').css({
            'font-weight' : 'bold',
        });
    }else {
        $('.tabs li.tab-2').css({
            'font-weight' : 'normal',
        });
    }

    if(currentSlide === $('.tabs li.tab-3').index()) {
        $('.tabs li.tab-3').css({
            'font-weight' : 'bold',
        });
    }else {
        $('.tabs li.tab-3').css({
            'font-weight' : 'normal',
        });
    }

    if(currentSlide === $('.tabs li.tab-4').index()) {
        $('.tabs li.tab-4').css({
            'font-weight' : 'bold',
        });
    }else {
        $('.tabs li.tab-4').css({
            'font-weight' : 'normal',
        });
    }

    if(currentSlide === $('.tabs li.tab-5').index()) {
        $('.tabs li.tab-5').css({
            'font-weight' : 'bold',
        });
    }else {
        $('.tabs li.tab-5').css({
            'font-weight' : 'normal',
        });
    }

});

Answer 1

我认为处理所需内容的最佳方法是添加一个active类，该类将具有所需的CSS属性。我不确定您的.tab-X是否与幻灯片上的currentSlide变量相同，但是您可以执行以下操作：

$('#tab-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
   $('.tabs li').removeClass('active');
   $('.tabs li.tab-'+currentSlide).addClass('active');
});

还有您的CSS：

.active {
   font-weight: bold;
   /* Your other desired properties */
}

Answer 2

您可以使用所有5个描述符名称填充数组，然后对其进行迭代：

var desc = ['.tabs li.tab-1', '.tabs li.tab-2', '.tabs li.tab-3', '.tabs li.tab-4',
           '.tabs li.tab-5'];

for (var i=0, len=desc.length; i < len; i++) {
    if (currentSlide === $(desc[i]).index()) {
        $(desc[i]).css({
            'font-weight' : 'bold',
        });
    }
    else {
        $(desc[i]).css({
            'font-weight' : 'normal',
        });
    }
}

请注意，这实际上并不会改变需要执行的代码量（它会稍有增加），但确实解决了删除那些重复的if检查的问题。

Answer 3

为什么不使用switch语句？

$('#tab-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){    
       switch (currentSlide) {
            case $('.tabs li.tab-1').index():
                $('.tabs li.tab-1').css({
                    'font-weight' : 'bold',
                });
                break;
            case $('.tabs li.tab-2').index():
                $('.tabs li.tab-2').css({
                    'font-weight' : 'bold',
                });
            case $('.tabs li.tab-3').index():
                $('.tabs li.tab-3').css({
                    'font-weight' : 'bold',
                });
            case $('.tabs li.tab-4').index():
                $('.tabs li.tab-4').css({
                    'font-weight' : 'bold',
                });
            case $('.tabs li.tab-5').index():
                $('.tabs li.tab-5').css({
                    'font-weight' : 'bold',
                });
                break;
            default:
                $('.tabs li.tab-1,.tabs li.tab-2,.tabs li.tab-3,.tabs li.tab-4,.tabs li.tab-5').css({
                    'font-weight' : 'normal',
                });
        }
});

或使用||在if循环中是这样的：

$('#tab-slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
        if (currentSlide === $('.tabs li.tab-1').index() || currentSlide === $('.tabs li.tab-2').index() || currentSlide === $('.tabs li.tab-3').index() ||
            currentSlide === $('.tabs li.tab-4').index() || currentSlide === $('.tabs li.tab-5').index()) {
            $('.tabs li.tab-1,.tabs li.tab-2,.tabs li.tab-3,.tabs li.tab-4,.tabs li.tab-5').css({
                'font-weight': 'bold',
            });
        } else {
            $('.tabs li.tab-1,.tabs li.tab-2,.tabs li.tab-3,.tabs li.tab-4,.tabs li.tab-5').css({
                'font-weight': 'normal',
            });
        }
    });

简化多个if else语句

3 个答案: