我有一個數組在我的js文件中加載圖像到html幻燈片放映和縮略圖導航。幻燈片img src每4秒與一個縮略圖src屬性相匹配。此時間基於setInterval。jQuery：addClass元素具有相同或匹配的來源

我想不斷檢查幻燈片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>

來源

2014-02-24 Designaroni

你也應該刪除其它元素的類時，你的類添加到匹配的元素。 –

顯示你的js代碼。 –

我認爲這將是爲$('img[src=URL]')簡單，但是，徹底的測試發現這並不WO 100％的時間。因此，我最終在jQuery的.filter()函數中找到了可能的解決方案。 .filter()允許您根據自己的回撥將針頭移出堆疊。

我還利用圖像.load()事件。如果圖像已成功加載到主幻燈片img標記中，它將觸發事件，從而允許您在加載圖像後製作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'); 
});

Example

來源

2014-02-24 14:25:34 SpYk3HH

謝謝！ @ SpYk3HH這個效果很好，修改了一下，所以第一個縮略圖最初被設置爲一個.active狀態。非常感謝！ – Designaroni

@Designaroni沒問題，很高興我可以幫忙。只要知道你是否有任何問題！ – SpYk3HH

你可以用以下功能做到這一點。我認爲

您已經知道src
您將能夠選擇哪些圖像要改變爲主動/被動

首先，從笨手笨腳刪除active類，並將其添加到具體的一個

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

來源

2014-02-24 14:24:18

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

回答

Example

相關問題