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

我刚刚完成滑块的构建，目前正在尝试重构一些冗余的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(); 
        }

    });

}

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'）。长度，
幻灯片=$（'.programs slider.view programs description.view content.views row'），
位置=0，
move=0；
//调整大小时重置滑块位置
$（'.programs slider.view programs description.view content'）.css（{'right'：0}）；
//根据幻灯片总数应用最大宽度
sliderContainer.width（programSliderWidth*totalSlides）；
//根据programSliderWidth的宽度应用幻灯片的宽度
幻灯片宽度（程序幻灯片宽度）；
//在开始时添加活动类
$（'.program controls.program list ul li:first child'）.addClass（'active'）；
//开始时隐藏上一个箭头
如果（位置==0）{
$（'.arrow controls.prev'）.hide（）；
}
$（'.program controls.program list ul li'）。在（'单击'，函数（）上）{
位置=$（this.index（）；
$（'.programs slider.view programs description.view content'）.css（{'right'：position*programssliderwidth}）；
$（'.program controls.program list ul li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
//基于滑块位置显示隐藏方向导航
如果（位置==0）{
$（'.arrow controls.prev'）.hide（）；
}
否则{
$（'.arrow controls.prev'）.show（）；
}
如果（位置==totalSlides-1）{
$（'.arrow controls.next'）.hide（）；
}
否则{
$（'.arrow controls.next'）.show（）；
}
});
$（'.arrow controls.prev'）。在（'click'，function（）上{
如果（位置>0）{
位置--；
$（'.programs slider.view programs description.view content'）.css（{'right'：position*programssliderwidth}）；
$（'.program controls.program list ul li.active'）.removeClass（'active'）；
}
如果（位置==0）{
$（'.arrow controls.prev'）.hide（）；
}
否则{
$（'.arrow controls.prev'）.show（）；
}
如果（位置==totalSlides-1）{
$（'.arrow controls.next'）.hide（）；
}
否则{
$（'.arrow controls.next'）.show（）；
}
});
$（'.arrow controls.next'）。在（'click'，function（）上{
如果（位置

我会为您构建一个函数：

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

借

---

我会为您构建一个函数：

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

借

根据条件调用函数的另一种方法。 使用以下方法根据if条件调用函数：

condition && myFunc();

对于else，只需将相同的条件更改为else。以下是一个例子：

function a () { }

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

否则，OP的代码宽度将缩小

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'）。长度，
幻灯片=$（'.programs slider.view programs description.view content.views row'），
位置=0，
move=0；
//调整大小时重置滑块位置
$（'.programs slider.view programs description.view content'）.css（{'right'：0}）；
//根据幻灯片总数应用最大宽度
sliderContainer.width（programSliderWidth*totalSlides）；
//根据programSliderWidth的宽度应用幻灯片的宽度
幻灯片宽度（程序幻灯片宽度）；
//在开始时添加活动类
$（'.program controls.program list ul li:first child'）.addClass（'active'）；
//开始时隐藏上一个箭头
位置==0&&$（'.arrow controls.prev'）.hide（）；
$（'.program controls.program list ul li'）。在（'单击'，函数（）上）{
位置=$（this.index（）；
$（'.programs slider.view programs description.view content'）.css（{'right'：position*programssliderwidth}）；
$（'.program controls.program list ul li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
//基于滑块位置显示隐藏方向导航
位置==0&&$（'.arrow controls.prev'）.hide（）；
位置！=0&&$（'.arrow controls.prev'）.show（）；
位置==（totalSlides-1）&&$（'.arrow controls.next'）.hide（）；
位置！（totalSlides-1）&&$（'.arrow controls.next'）.show（）；
});
$