Example

Question

我的js文件中有一个数组，可以将图像加载到html中进行幻灯片放映和缩略图导航。幻灯片img src每4秒与一个缩略图src属性匹配。此时间基于setInterval。

我想不断检查幻灯片img src是否与缩略图img src匹配，然后向两者添加一个active类。我已经能够将类添加到主幻灯片和所有缩略图中，但我似乎无法仅将类添加到仅具有匹配的src属性的img元素

<div class="slideshow">
<!-- this img src attribute changes on a setInterval and matches one of the .imageHolder img src attributes at a time. I would like to addClass to img elements that have the same src and remove when they no longer match-->
<img class="slideshowimg" alt="" src="imgs/slide3_470hx690w.jpg" style="opacity: 1;">
</div>
<div class="description" style="opacity: 1;">
    <h2>LOREM IPSUM BLAH BLAH BLAH</h2>
    <p>lorem ipsum blah blah blah</p>
    <a href="#" class="btn readmore">Read More</a>
</div>
<a href="#" class="btn prev">Previous</a>
<a href="#" class="btn next">Next</a>
<div class="window">
    <div class="imageHolder" style="width: 690px;">
        <img src="imgs/slide1_470hx690w.jpg">
        <img src="imgs/slide2_470hx690w.jpg">
        <img src="imgs/slide3_470hx690w.jpg">
        <img src="imgs/slide4_470hx690w.jpg">
        <img src="imgs/slide5_470hx690w.jpg">
    </div>
</div>

Answer 1

您可以使用以下功能执行此操作。我认为

您已经知道src
您可以选择要更改为主动/被动的图像

首先，从所有大拇指中删除active类，并将其添加到特定的一个

function change(src) {
    $(".imageHolder img").each(function(){
        $(this).removeClass("active");
    });
    $('img[src="' + src + '"]').addClass("active");
}

Answer 2

我认为它会像$('img[src=URL]')一样简单，但是，彻底的测试发现这在100％的时间都不起作用。因此，我最终在jQuery的.filter()函数中找到了可能的解决方案。 .filter()允许您根据自己的回调将针头从堆叠中清除掉。

我还使用了图片.load()事件。如果图片已成功加载到主幻灯片img标记中，则会触发.load()事件，从而允许您在图片加载后制作do work。所以你可以这样做：

$('.slideshowimg').on('load', function(e) {
    $('img.active').removeClass('active');
    var src = $(this).addClass('active').prop('src');
    $('img').filter(function(e) { return $(this).prop('src') == src; }).addClass('active');
});

jQuery：addClass到具有相同或匹配源的元素

2 个答案:

Example