jQuery owl carousel通过data属性读取自定义配置不生效如何解决

核心问题原因 #

你代码里有两处关键错误导致配置不生效：

• 你拿到的data-plugin-options本身是完整的JSON字符串，调用substring方法移除首尾字符的操作会破坏JSON结构，完全不需要这一步处理
• 你写的$owl.owlCarousel({ options })是ES6对象简写语法，等价于传递了{ options: 你的配置字符串 }，没有把配置项直接传给轮播初始化方法，导致自定义配置完全没有被识别

修复后的代码 #

$('.owl-carousel').each(function () {
    var $owl = $(this);
    // 销毁已有轮播实例
    $owl.trigger('destroy.owl.carousel').removeClass('owl-loaded');
    // 直接读取data属性并解析为JSON对象，jQuery的data方法会自动解析合法的JSON字符串
    var options = $owl.data('plugin-options');
    // 直接把配置对象传入初始化方法即可
    $owl.owlCarousel(options);
});

兼容写法 #

如果部分旧版jQuery无法自动解析data属性的JSON，可以手动调用JSON.parse处理：

$('.owl-carousel').each(function () {
    var $owl = $(this);
    $owl.trigger('destroy.owl.carousel').removeClass('owl-loaded');
    // 手动读取属性+JSON解析，兼容性更好
    var optionsStr = $owl.attr('data-plugin-options');
    var options = {};
    try {
        options = JSON.parse(optionsStr);
    } catch (e) {
        console.error('轮播配置格式错误', e);
    }
    $owl.owlCarousel(options);
});

内容的提问来源于stack exchange，提问作者Carlos