Reducing if/else statements in my javascript code

Question

I've just finished building my slider and currently trying to refactor some redundant if/else code. Here is a preview of the code that I have built. Inside the event handlers. I have some if/else that are redundant, the purpose of the condition is to detect if slider reaches the last slide it will hide the next button and if the slider goes to the first slide. It will hide the previous button.

The slider I have built has no looping function.

    var programSliderContainer = $('.programs-slider'),
        programSliderWidth     = $('.programs-slider').outerWidth(),
        sliderContainer        = $('.programs-slider .view-programs-description .view-content'),
        totalSlides            = $('.programs-slider .view-programs-description .view-content .views-row').length,
        slides                 = $('.programs-slider .view-programs-description .view-content .views-row'),
        position               = 0,
        move                   = 0;


    //Reset Slider Position when resizing
    $('.programs-slider .view-programs-description .view-content').css({'right' : 0 });

    //Apply the Maximum width based on the total number of slides
    sliderContainer.width(programSliderWidth * totalSlides);

    //Apply the width of the slides based on the width of programSliderWidth
    slides.outerWidth(programSliderWidth);


    //Add Class active on Start
    $('.program-controls .program-list ul li:first-child').addClass('active');


    //Hide Previous Arrow on Start
    if( position == 0 ) {
        $('.arrow-controls .prev').hide();
    }

    $('.program-controls .program-list ul li').on('click', function() {
        position = $(this).index();
        $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });

        $('.program-controls .program-list ul li.active').removeClass('active');
        $(this).addClass('active');


        //Show Hide Directional Navigation based on Slider Position
        if( position == 0 ) {
            $('.arrow-controls .prev').hide(); 
        }

        else {
            $('.arrow-controls .prev').show(); 
        }

        if( position == totalSlides - 1  ) {
            $('.arrow-controls .next').hide(); 
        }

        else {
            $('.arrow-controls .next').show(); 
        }

    });


    $('.arrow-controls .prev').on('click', function() {
        if( position > 0 ) {
            position--;
            $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });

            $('.program-controls .program-list ul li.active').removeClass('active');
        }

        if( position == 0 ) {
            $('.arrow-controls .prev').hide(); 
        }

        else {
            $('.arrow-controls .prev').show(); 
        }


        if( position == totalSlides - 1 ) {
            $('.arrow-controls .next').hide(); 
        }

        else {
            $('.arrow-controls .next').show(); 
        }

    });

    $('.arrow-controls .next').on('click', function() {
        if( position < totalSlides - 1 ) {
            position++;
            $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });

            $('.program-controls .program-list ul li.active').removeClass('active');
        }


        if( position == 0 ) {
            $('.arrow-controls .prev').hide(); 
        }

        else {
            $('.arrow-controls .prev').show(); 
        }


        if( position == totalSlides - 1 ) {
            $('.arrow-controls .next').hide(); 
        }

        else {
            $('.arrow-controls .next').show(); 
        }

    });

}

You can remove the if statements by using toggle() and providing a boolean parameter which determines whether the element should be shown or not. — Rory McCrossan
– Rory McCrossan, Commented May 22, 2017 at 10:06

DrunkDevKek · Accepted Answer · 2017-05-22 10:19:00Z

1

I would have built a function to do this for you:

function toggleArrows(position){
    position === 0 ? $('.arrow-controls .prev').hide() : $('.arrow-controls .prev').show()
    position === totalSlides - 1 ?  $('.arrow-controls .next').hide() : $('.arrow-controls .next').show() 
}

and in your code, replace

if( position == 0 ) {
        $('.arrow-controls .prev').hide(); 
    }

    else {
        $('.arrow-controls .prev').show(); 
    }


    if( position == totalSlides - 1 ) {
        $('.arrow-controls .next').hide(); 
    }

    else {
        $('.arrow-controls .next').show(); 
    }

by

toggleArrows(position)

answered May 22, 2017 at 10:19

DrunkDevKek

4694 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user8003769 · Accepted Answer · 2017-05-22 10:20:46Z

Another way to call function based on condition.

Use the below method to call functions based on if conditions:

condition && myFunc();

And for else, just change the same condition to function as else. Below is an example:

function a () { }

// for if condition
1 == 1 && a();
// for else condition
1 != 1 && a();

OP's code width minified if-else

    var programSliderContainer = $('.programs-slider'),
        programSliderWidth     = $('.programs-slider').outerWidth(),
        sliderContainer        = $('.programs-slider .view-programs-description .view-content'),
        totalSlides            = $('.programs-slider .view-programs-description .view-content .views-row').length,
        slides                 = $('.programs-slider .view-programs-description .view-content .views-row'),
        position               = 0,
        move                   = 0;


    //Reset Slider Position when resizing
    $('.programs-slider .view-programs-description .view-content').css({'right' : 0 });

    //Apply the Maximum width based on the total number of slides
    sliderContainer.width(programSliderWidth * totalSlides);

    //Apply the width of the slides based on the width of programSliderWidth
    slides.outerWidth(programSliderWidth);


    //Add Class active on Start
    $('.program-controls .program-list ul li:first-child').addClass('active');

    //Hide Previous Arrow on Start
    position == 0 && $('.arrow-controls .prev').hide();

    $('.program-controls .program-list ul li').on('click', function() {
        position = $(this).index();
        $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });

        $('.program-controls .program-list ul li.active').removeClass('active');
        $(this).addClass('active');


        //Show Hide Directional Navigation based on Slider Position
        position == 0 && $('.arrow-controls .prev').hide(); 
        position != 0 && $('.arrow-controls .prev').show(); 

        position == (totalSlides - 1) && $('.arrow-controls .next').hide(); 
        position! (totalSlides - 1) && $('.arrow-controls .next').show(); 
    });


    $('.arrow-controls .prev').on('click', function() {
        position > 0 && function () {
            position--;
            $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });
            $('.program-controls .program-list ul li.active').removeClass('active');
        }();

        position == 0 && $('.arrow-controls .prev').hide(); 
        position != 0 && $('.arrow-controls .prev').show(); 

        position == (totalSlides - 1) && $('.arrow-controls .next').hide(); 
        position != (totalSlides - 1) && $('.arrow-controls .next').show(); 
    });

    $('.arrow-controls .next').on('click', function () {
        position < (totalSlides - 1) && function () {
            position++;
            $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });
            $('.program-controls .program-list ul li.active').removeClass('active');
        }();

        position == 0 && $('.arrow-controls .prev').hide(); 
        position != 0 && $('.arrow-controls .prev').show();

        position == (totalSlides - 1) && $('.arrow-controls .next').hide(); 
        position != (totalSlides - 1) && $('.arrow-controls .next').show(); 
    });
}

You can also use anonymous functions and invoke them.

varsha ghodki · Accepted Answer · 2017-05-22 10:59:22Z

Created separate functions for adding/removing classes-

var programSliderContainer = $('.programs-slider'),
        programSliderWidth     = $('.programs-slider').outerWidth(),
        sliderContainer        = $('.programs-slider .view-programs-description .view-content'),
        totalSlides            = $('.programs-slider .view-programs-description .view-content .views-row').length,
        slides                 = $('.programs-slider .view-programs-description .view-content .views-row'),
        position               = 0,
        move                   = 0;


    //Reset Slider Position when resizing
    $('.programs-slider .view-programs-description .view-content').css({'right' : 0 });

    //Apply the Maximum width based on the total number of slides
    sliderContainer.width(programSliderWidth * totalSlides);

    //Apply the width of the slides based on the width of programSliderWidth
    slides.outerWidth(programSliderWidth);

    //Add Class active on Start
    $('.program-controls .program-list ul li:first-child').addClass('active');

    //Hide Previous Arrow on Start
    if( position == 0 ) {
        $('.arrow-controls .prev').hide();
    }

    $('.program-controls .program-list ul li').on('click', function() {
        position = $(this).index();
        toggleClasses();
        $(this).addClass('active');
        //Show Hide Directional Navigation based on Slider Position
         toggleArrows();
    });


    $('.arrow-controls .prev').on('click', function() {
        if( position > 0 ) {
            position--;
            toggleClasses();
        }
        toggleArrows();
    });

    $('.arrow-controls .next').on('click', function() {
        if( position < totalSlides - 1 ) {
            position++;
            toggleClasses();
        }
        toggleArrows();
    });
    
function toggleArrows(){

     (position === 0)? $('.arrow-controls .prev').hide() : $('.arrow-controls .prev').show();
     (position === totalSlides-1)? $('.arrow-controls .next').hide():$('.arrow-controls .next').show(); 
}

function toggleClasses() {

     $('.programs-slider .view-programs-description .view-content').css({'right' : position*programSliderWidth });
     $('.program-controls .program-list ul li.active').removeClass('active');
 }

}

Collectives™ on Stack Overflow

Reducing if/else statements in my javascript code

3 Answers 3

Comments

Another way to call function based on condition.

OP's code width minified if-else

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Another way to call function based on condition.

OP's code width minified if-else

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related