jquery owl-carousel owl-dots类问题

Question

当我在Rails项目中使用owl-carousel时，我遇到了一些问题。当我返回到使用carousel类的浏览器的缓存页面时，我在页面中得到了太多的carousel owl-dot类，这是我的

JS代码

function initScrollboxHobby() {
    var owl = $(".owl-carousel");
    owl.owlCarousel({
        // loop: true,
        items: 1,
        nav: true
    });
}

并发布HTML代码

​

​

如何修复它？

Answer 1

我猜您使用的是turboinks，当您返回时，页面被它缓存，当它加载时，它重新运行owl carousel init函数。

问题在于，turbolink不能很好地处理非幂等函数https://github.com/turbolinks/turbolinks#making-transformations-idempotent

我已经设法用其他js插件解决了这个问题，所以它应该适用于你。

从巴萨斯的角度来看，这个想法是：

首先，当用户第一次进入页面时，复制自身具有类.owl-carousel的元素的内容作为数据属性

carousel = $('.owl-carousel');
carousel.data('originalHtml', carousel.html();
carousel.owlCarousel(....)

然后，当用户返回时，在初始化carousel之前，检查它是否被初始化和缓存，在这种情况下，首先用原始类替换内容并删除类

carousel = $('.owl-carousel');
if (carousel.hasClass('owl-loaded')) {
  carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
}
carousel.owlCarousel(....)

您可以将这两个步骤混合为一个步骤：

$(function() {
  const carousel = $('.owl-carousel');
  if (carousel.hasClass('owl-loaded')) { //if it has the class then it means it's the cached view
    carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
  } else { // else it's a fresh load of the page
    carousel.data('originalHtml', carousel.html());
  }
  carousel.owlCarousel(....)
})

这有点老生常谈，但我发现使用那些没有准备好与turbolinks一起工作的插件的唯一方法是不修改这些插件。

另一种选择是禁用Turbolinks，如果你认为你只是不需要它。

Answer 2

感谢arieljuod对问题原因的帮助和我自己的尝试。

我现在是这样写的。

var owl = $(".owl-carousel");
var owl_navs = $('.owl-carousel .owl-nav');
var owl_dots = $('.owl-carousel .owl-dots');
var owl_cloned = $('.owl-carousel .owl-stage-outer .owl-stage .cloned');

if(owl.hasClass('owl-loaded'))
{
    owl_navs.remove();
    owl_dots.remove();
    owl_cloned.remove();
}
owl.owlCarousel({
    loop: true,
    items: 1,
    nav: true
});

虽然单调乏味，但效果很好。

现在，我明白了原因。

当我返回到缓存页面时，因为我在ERB文件中编写了javascript代码，所以旧的HTML代码可能会发生变化。

然后Turbolinks函数将在更改后的新HTML代码中运行JS代码，Turbolinks必须这样做，因为当我再次访问缓存页面时，它将丢失所有事件绑定。

因此，整个旋转木马项目将是凌乱的。