Question

我正在尝试调用一个函数，当内部图像具有类hover时，将类active添加到轮播范围之外的链接。活动类迭代每个item，每个3 sec切换开关。

如何在项目处于活动状态时添加课程？

JS FIDDLE LINK jsfiddle.net/vnpm1y06/222

＆＃13;

var test = $('.active');

function linkHover() {
  if ($('.item.active').length != 0) {
    $('#link3').addClass('hover');
  }
};
linkHover();

＆＃13;

.hover {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
  <div id="slide1" class="item">
    <img src="img1.jpg">
  </div>
  <div id="slide2" class="item">
    <img src="img2.jpg">
  </div>
  <div id="slide3" class="item active">
    <img src="img3.jpg">
  </div>
</div>
<div class="nav-links">
  <a id="link1">Link</a>
  <a id="link2">Link</a>
  <a id="link3">Link</a>
</div>

＆＃13;

Answer 1

由于您使用owl-carousel，您不应该找到一种方法来调用超出范围的内容，您应该寻找捕获事件的方法，然后在这些事件上添加代码。

您可以检查owl carousel - event docs是否有事件及其签名。

在您的情况下，您需要change事件：

owl.on('changed.owl.carousel', function(event) {
    ...
})

现在，根据您的小提琴，我添加了额外的link，因为您5 divs和4有$('.link.active').removeClass('hover').next().addClass('hover')个链接。

您可以参考以下JSFiddle进行工作演示。

我会尝试找到一种更好，更通用的方法来获取当前元素的索引。您可以使用{{1}}，但这需要更多精炼。

如果您有任何疑问，请与我们联系。

调用jquery事件处理程序超出范围

1 个答案: