【问题标题】:Passing a javascript variable to a jQuery plugin initilize function将 javascript 变量传递给 jQuery 插件初始化函数
【发布时间】:2014-07-17 11:53:27
【问题描述】:

我正在使用 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 函数,它工作正常,但这是代码的大量重复。

提前感谢您的帮助。

附:这是在prototypejs中,因此为什么在无冲突模式下调用jQuery。

【问题讨论】:

    标签: javascript jquery prototypejs owl-carousel


    【解决方案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});
    });
    

    【讨论】:

    • 感谢您的快速答复。现在完美运行:)
    【解决方案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;
    }
    

    【讨论】:

    • 感谢您抽出宝贵的时间来回答,也非常感谢您这么快回答。最后我选择了 Satpal 的答案作为接受的答案,因为它还包括 jQuery 函数调用所需的细微变化。
    猜你喜欢
    • 2023-03-06
    • 1970-01-01
    • 2014-10-31
    • 1970-01-01
    • 2016-11-08
    • 2022-07-19
    • 2018-04-15
    • 2016-08-21
    • 2012-03-02
    相关资源
    最近更新 更多