jQuery的猫头鹰轮播猫头鹰点类问题

Question

在Rails项目中使用猫头鹰轮播时，出现了一些问题。 当我回到使用carousel类的浏览器的缓存页面时，页面中出现太多carousel owl-dot类，这就是我的

JS代码

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

并发布HTML代码

如何修复？

Answer 1

我猜您正在使用涡轮墨水，当您返回页面时，页面将对其进行缓存，并在页面加载时重新运行owl carousel init函数。

基本上，问题在于涡轮链接不能与非幂等函数https://github.com/turbolinks/turbolinks#making-transformations-idempotent配合使用

我已经设法通过其他js插件解决此问题，因此它应该对您有用。

基本上，这个想法是：

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

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

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

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(....)
})

这有点hacky，但是我发现使用不准备与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必须这样做，因为当我再次访问缓存的页面时，它将丢失所有事件绑定。

因此，整个轮播项目将变得凌乱。