呼叫jQuery的事件处理程序超出范围

Question

我想调用一个函数来添加类hover到轮播范围之外的链接，当一个图像里面有类active。活动类遍历每个item，每隔3 sec打开和关闭。

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

JS FIDDLE LINK 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) { 
    ... 
}) 

现在按照你的小提琴，我增加了一个额外的link你有5滑动divs和4链接。

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

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

让我知道你是否有任何疑问。