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

Question

当内部图像具有 active 类时，我尝试调用一个函数将 hover 类添加到轮播范围之外的链接。事件类迭代每个item，每3 秒切换一次。

当元素处于事件状态时如何添加类？

JS fiddle 链接 jsfiddle.net/vnpm1y06/222

var test = $('.active');

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

.hover {
  color: red
}

<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>

Answer 1

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

您可以查看owl carousel - event docs获取事件及其签名。

就您而言，您需要 change 事件:

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

现在根据您的 fiddle ，我添加了一个额外的链接，因为您有5滑动div和4 > 链接。

您可以引用以下JSFiddle用于工作演示。

我将尝试找到一种更好、更通用的方法来获取当前元素的索引。您可以使用 $('.link.active').removeClass('hover').next().addClass('hover')，但这需要更多改进。

如果您有任何疑问，请告诉我。