使用JQuery更改具有動態類的元素的CSS

Question

我試圖在for循環中更改元素的CSS，以使循環中的每個元素都獲得不同的CSS。

for(blablabla.. i++){
 icon: myIcon = L.divIcon({
       className: 'tempPanel s' + trackers[index].id
})}

這使得每個元素的類都包含'tempPanel'和's1'或's2'或's3'等等。

$('.s' + trackers[index].id).css("background-image", "url('data:image/svg+xml;utf8,"+ app6aIcon +"')");

..因為我希望每個元素都具有tempPanel和s X的CSS屬性。 但是，這不會為對象提供背景圖像。 如果我將代碼更改為..

$('.tempPanel').css("background-image", "url('data:image/svg+xml;utf8,"+ app6aIcon +"')");

..所有元素都將獲得相同的背景圖像（很明顯）。

如何給元素提供不同的背景並仍然應用tempPanel的CSS屬性？

Answer 1

尚不清楚您的用途是什么，但這是一個人為的示例，說明如何將具有特定類的每個元素的背景圖像設置為某些數據源提供的不同圖像。 我在其他html元素上使用數據屬性來存儲圖像url，但是您可以使用數組或對象...。

請注意，此方法完全省去了第二個類，而是將eq()與我們已經擁有的類一起使用。

 $('.tempPanel').each(function() { var cur = $('.tempPanel').index($(this)); var url = $('.holder').eq(cur).data('img-url'); $(this).css('background-image', 'url(' + url + ')'); }); 

 .tempPanel { width: 100px; height: 100px; float: left; margin-left: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="holder" data-img-url="https://placeimg.com/100/100/arch"></div> <div class="holder" data-img-url="https://placeimg.com/100/100/nature"></div> <div class="holder" data-img-url="https://placeimg.com/100/100/people"></div> <br> <div class="tempPanel"></div> <div class="tempPanel"></div> <div class="tempPanel"></div> 

Answer 2

我現在解決了，答案很簡單。 我要做的就是在將className賦予元素之后放置JQuery.css行。 我也將className更改為className：'s'+ index而不是'tempPanel s'+ index。

非常感謝您的回答。