CODEWITHSUNDEEP
jquery
Jessica
Jessica

Reputation: 167

Simplify multiple if else statements

I'm not sure how to simplify multiple if else statements.

I'm trying to loop through the slick slider to grab each slide and link it with a li item to display the heading for that particular slide

Please see code below for what i have at the moment

$('#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',
        });
    }

});

Upvotes: 0

Views: 76

Answers (3)

Mojo Allmighty
Mojo Allmighty

Reputation: 793

I think the best way to deal with what you want is to add an active class which will have your desired css properties. I'm not sure if your .tab-X is the same as currentSlide variable on slide but you can do something like this :

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

And your CSS :

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

Upvotes: 2

Den Pat
Den Pat

Reputation: 1254

Why not use switch statement?

$('#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',
                });
        }
});

Or use || in if loop like this:

$('#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',
            });
        }
    });

Upvotes: 0

Tim Biegeleisen
Tim Biegeleisen

Reputation: 520918

You could populate an array with all 5 descriptor names, and then iterate it:

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',
        });
    }
}

Note that this doesn't actually change the amount of code which needs to execute (it increases it slightly), but it does solve the problem of removing those repetitive if checks.

Upvotes: 0

Related Questions