Question

我的页面中有两个共享相同选项的滑块：

var options1 = {
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 310,
    itemMargin: 5
}

var options2 = {
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false
}

然后我有这样的事情：

$('#carousel').flexslider(options1);
$('#slider').flexslider(options2);

$('#carousel2').flexslider(options1);
$('#slider2').flexslider(options2);

问题是我需要在选项的末尾添加一个对于每个选项不同的选项，即：asNavFor: '#slider'表示options1，sync: "#carousel"表示选项二。我试过这个，但它不起作用：

$('#carousel').flexslider(options1, {asNavFor: '#slider'});
$('#slider').flexslider(options2, {sync: "#carousel"});

$('#carousel2').flexslider(options1, {asNavFor: '#slider2'});
$('#slider2').flexslider(options2, {sync: "#carousel2"});

我想避免重复这些选项，因为它们对于每个滑块都是相同的。提前谢谢！

Answer 1

您可以在将对象传递给flexslider()：

之前将属性添加到对象中

options1['asNavFor'] = '#slider';
options2['sync'] = '#carousel';

$('#carousel').flexslider(options1);
$('#slider').flexslider(options2);

然后在第二次调用之前用新值覆盖它：

options1['asNavFor'] = '#slider2';
options2['sync'] = '#carousel2';

$('#carousel2').flexslider(options1);
$('#slider2').flexslider(options2);

您可以使用for循环：

var nbr_elements = 3;

for(var i=1;i<nbr_elements;i++)
{
    if(i==1){
        options1['asNavFor'] = '#slider';
        options2['sync'] = '#carousel';

        $('#carousel').flexslider(options1);
        $('#slider').flexslider(options2);
    }else{
        options1['asNavFor'] = '#slider'+i;
        options2['sync'] = '#carousel'+i;

        $('#carousel'+i).flexslider(options1);
        $('#slider'+i).flexslider(options2);
    }
}

希望这有帮助。

Answer 2

您可以使用Object.assign来创建一个新对象，并将选项作为模板：

$('#carousel').flexslider(Object.assign({}, options1, {asNavFor: '#slider'}));
$('#slider').flexslider(Object.assign({}, options2, {sync: "#carousel"}));

$('#carousel2').flexslider(Object.assign({}, options1, {asNavFor: '#slider2'}));
$('#slider2').flexslider(Object.assign({}, options2, {sync: "#carousel2"}));

如果您需要支持旧浏览器，则可以使用jQuery＆＃39; $.extend或polyfill。

Answer 3

我建议使用jQuery's extend动态创建扩展选项，如下所示：

options1Nav1 = $.extend({}, options1, {asNavFor: '#slider'});
options2Sync1 = $.extend({}, options2, {sync: '#carousel'});

options1Nav2 = $.extend({}, options1, {asNavFor: '#slider2'});
options2Sync2 = $.extend({}, options2, {sync: '#carousel2'});

然后调用

$('#carousel').flexslider(options1Nav1);
$('#slider').flexslider(options2Sync1);

$('#carousel2').flexslider(options1Nav2);
$('#slider2').flexslider(options2Sync2);

当然，您也可以直接传递动态扩展选项。

将多个选项传递给javascript中的函数

3 个答案: