Question

我刚刚完成滑块的构建，目前正在尝试重构一些冗余的if / else代码。这是我构建的代码的预览。在事件处理程序内部。我有一些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
    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(); 
        }

    });

}

Answer 1

我会为你做一个功能：

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

并在您的代码中，替换

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(); 
    }

通过

toggleArrows(position)

Answer 2

根据条件调用函数的另一种方法。

使用以下方法根据条件调用函数：

condition && myFunc();

而对于其他人来说，只需改变相同的条件即可。以下是一个例子：

function a () { }

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

OP的代码宽度缩小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(); 
    });
}

您也可以使用匿名函数并调用它们。

Answer 3

创建了用于添加/删除类的单独函数 -

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

减少我的javascript代码中的if / else语句

3 个答案:

根据条件调用函数的另一种方法。

OP的代码宽度缩小if-else