Question

我有几个滑块实例，我需要将相同的参数传递给每个滑块。

我认为我需要数组，但由于我是JS的新手，我不确定如何正确地做到这一点。

参数的例子如下：

spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
  600: {
    slidesPerView: 2
  },
  991: {
    slidesPerView: 3
  },
  1200: {
    slidesPerView: 4
  }
}

和滑块实例：

var swiper1 = new Swiper('.swiper1', {
   prevButton: '.b-prev-1',
   nextButton: '.b-next-1',

   //here I need to get the rest of the parameters

});

谢谢：）

Answer 1

您好，您可以写如下

＆＃13;

 var swiper1 = new Swiper('.swiper1', [
   prevButton: '.b-prev-1',
   nextButton: '.b-next-1',
   //here I need to get the rest of the parameters
]);

＆＃13;

Answer 2

试一试

function(arrayP){    
   for(var i = 0; i < arrayP.length; i++){
      alert(arrayP[i]);    //no .value here
   }
}

链路： - Passing an array as parameter in JavaScript

Answer 3

您可以使用jQuery＆＃39; $.extend()：

var extraDetails = {
    spaceBetween: 20,
    slidesPerView: 5,
    breakpoints: {
      600: {
        slidesPerView: 2
      },
      991: {
        slidesPerView: 3
      },
      1200: {
        slidesPerView: 4
      }
    }
};

var swiper1 = new Swiper('.swiper1', $.extend({ 
        prevButton: '.b-prev-1',
        nextButton: '.b-next-1'
    }, 
    extraDetails
));

Answer 4

在ES5中执行此操作的最有说服力的方法是为每张幻灯片创建一个新的配置对象，但使用$.extend将其基于公共对象。（Object.assign()在VanillaJS中类似）

var commonConfig = { spaceBetween: 20, slidesPerView: 5, breakPoints: { ... } };

var swiper1 = $.extend(true, {}, commonConfig, {
    prevButton: '.b-prev-1',
    nextButton: '.b-next-1'
});

var swiper2 = $.extend(true, {}, commonConfig, {
    prevButton: '.b-prev-2',
    nextButton: '.b-next-2'
});

看到更多代码真的很酷 - 我想你可以遍历你的DOM元素并为每个元素动态创建配置。类似的东西：

$('.swiper').each(function(idx, el){
    $(this).swiper({
        spaceBetween: 20,
        slidesPerView: 5,
        breakPoints: { ... },
        prevButton: '.b-prev-'+(idx+1),
        nextButton: '.b-next-'+(idx+1)
    });
});

在javascript中使用数组传递参数

4 个答案: