Question

我正在使用jQuery插件“Owl Carousel”，当我尝试使用javascript变量作为选项值初始化插件时，我遇到了一个奇怪的问题。

基本上我有以下内容：

// thumbnail_count is the number of images in the slider, 
// already calculated elsewhere

var thumbnail_breakpoints = '';
switch (thumbnail_count) {
    case 3:
        thumbnail_breakpoints = '[0, 1], [219, 2], [299, 3]';
        break;
    case 2:
        thumbnail_breakpoints = '[0, 1], [219, 2]';
        break;
    case 1:
        thumbnail_breakpoints = '[0, 1]';
        break;
}
jQuery(function($) {
    $('#itemslider-zoom').data('owlCarousel').reinit({
        itemsCustom: [thumbnail_breakpoints]
    });
});

这不起作用，并且itemCustom的值未正确传递给reinit功能。但是，如果我手动输入itemCustom的值，则可以根据需要完成工作。对于两个图像，例如

jQuery(function($) {
    $('#itemslider-zoom').data('owlCarousel').reinit({
        itemsCustom: [[0, 1], [219, 2]]
    });
});

任何人都可以帮我解决原因吗？使用javascript调试我可以看到thumbnail_breakpoints肯定正确设置。此外，如果我更改switch case语句，以便每个人都使用所需的值直接调用jQuery函数，它工作正常，但这是一个大量的代码重复。

提前感谢您的帮助。

P.S。这是在prototypejs中，因此为什么在没有冲突模式下调用jQuery。

Answer 1

创建二维数组并直接传递。

使用

var thumbnail_breakpoints = [];
switch (thumbnail_count) {
    case 3:
        thumbnail_breakpoints = [[0, 1], [219, 2], [299, 3]];
        break;
    case 2:
        thumbnail_breakpoints = [[0, 1], [219, 2]];
        break;
    case 1:
        thumbnail_breakpoints = [[0, 1]];
        break;
}
jQuery(function($) {
    $('#itemslider-zoom').data('owlCarousel').reinit({itemsCustom: thumbnail_breakpoints});
});

Answer 2

itemsCustom应该是一个数组数组，但是你要将它设置为一个字符串数组：

itemsCustom: [thumbnail_breakpoints] = ['[0, 1], [219, 2]']

更改代码以将thumbnail_breakpoints设置为数组或数组：

var thumbnail_breakpoints = [];
switch (thumbnail_count) {
    case 3:
        thumbnail_breakpoints = [[0, 1], [219, 2], [299, 3]];
        break;
    case 2:
        thumbnail_breakpoints = [[0, 1], [219, 2]];
        break;
    case 1:
        thumbnail_breakpoints = [[0, 1]];
        break;
}

将javascript变量传递给jQuery插件初始化函数

2 个答案: