时间戳

首页 > 解决方案 > 如何使用 (for each) 最小化代码行

javascript - 如何使用 (for each) 最小化代码行

问题描述

刷卡一

var swiperCurrent;

var swiper = new Swiper('.swiper-container-1', {
    init: false,
    pagination: '.swiper-pagination-1',
    nextButton: '.swiper-button-next-1',
    prevButton: '.swiper-button-prev-1',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent2(idx) {
    $('._ooredoo_banner_content_1> div').hide(0);
    $('._ooredoo_banner_content_1> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent !== el.activeIndex){
        showSliderContent(el.activeIndex);
        swiperCurrent = el.activeIndex;
    }
});

swiper.init();

刷卡二

var swiperCurrent2;

var swiper = new Swiper('.swiper-container-2, {
    init: false,
    pagination: '.swiper-pagination-2',
    nextButton: '.swiper-button-next-2',
    prevButton: '.swiper-button-prev-2',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent2(idx) {
    $('._ooredoo_banner_content_2> div').hide(0);
    $('._ooredoo_banner_content_2> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent2(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent2 !== el.activeIndex){
        showSliderContent2(el.activeIndex);
        swiperCurrent2 = el.activeIndex;
    }
});

swiper.init();

刷卡三

var swiperCurrent3;

var swiper = new Swiper('.swiper-container-3’, {
    init: false,
    pagination: '.swiper-pagination-3',
    nextButton: '.swiper-button-next-3',
    prevButton: '.swiper-button-prev-3',
    slidesPerView: 3,
    centeredSlides: true,
    paginationClickable: true,
    initialSlide: 2,
    spaceBetween: 22,
    breakpoints: {
        992: {
            slidesPerView: 1,
            spaceBetween: 10
        }
    },
    runCallbacksOnInit:true
});

function showSliderContent3(idx) {
    $('._ooredoo_banner_content_3> div').hide(0);
    $('._ooredoo_banner_content_3> div:eq('+ idx +')').fadeIn(200)
}

swiper.on('init', function (el) {
    showSliderContent3(el.activeIndex);
});

swiper.on('transitionEnd', function (el) {
    if(swiperCurrent3 !== el.activeIndex){
        showSliderContent3(el.activeIndex);
        swiperCurrent3 = el.activeIndex;
    }
});

swiper.init();

标签： javascriptjqueryforeachswiper

解决方案

类似以下（未经测试的）代码可能会有所帮助：我所做的只是将通用代码分解为可重用的函数并使用模板字符串填充缺失的部分，然后map使用该函数覆盖1、2和3部分 id。这意味着我们不再需要某些变量的2and后缀；3它们仅在回调生成的闭包内可用map。

这可能存在错误，要么重用我不应该重用的东西，要么反过来：让一些不必要的东西变得动态。在第一种情况下，如果你能继续用id来区分它，那就太好了。如果没有，您可能需要一个或多个附加变量，并且该map语句将不得不变得更复杂一些。

const makeSwiper = (id) => {
    var swiperCurrent;

    var swiper = new Swiper('.swiper-container-2', {
        init: false,
        pagination: `.swiper-pagination-${id}`,
        nextButton: `.swiper-button-next-${id}`,
        prevButton: `.swiper-button-prev-${id}`,
        slidesPerView: 3,
        centeredSlides: true,
        paginationClickable: true,
        initialSlide: 2,
        spaceBetween: 22,
        breakpoints: {
            992: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
        runCallbacksOnInit:true
    });

    function showSliderContent(idx) {
        $(`._ooredoo_banner_content_${id}> div`).hide(0);
        $(`._ooredoo_banner_content_${id}> div:eq(${idx})`).fadeIn(200)
    }

    swiper.on('init', function (el) {
        showSliderContent(el.activeIndex);
    });

    swiper.on('transitionEnd', function (el) {
        if(swiperCurrent !== el.activeIndex){
            showSliderContent(el.activeIndex);
            swiperCurrent = el.activeIndex;
        }
    });

    return swiper
}

const swipers = [1, 2, 3].map(makeSwiper)

推荐阅读