使用JQuery用动态类更改元素的CSS(Using JQuery to change CSS of element with dynamic class)

使用JQuery用动态类更改元素的CSS(Using JQuery to change CSS of element with dynamic class)

我试图在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属性？

I am trying to change the CSS of an element within a for-loop so that every element in the loop get different CSSes.

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

This makes every element's class contain 'tempPanel' and 's1' or 's2' or 's3' and so on.. After that i have..

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

..because i want every element to have the CSS properties of both tempPanel and sX. This however doesnt give the objects a background image. If i change code to..

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

.. all the elements will get the same background-image (obviously)..

How can i give elements different background and still apply CSS properties of tempPanel?

最满意答案

目前还不完全清楚你的用途是什么，但这是一个设计的例子，说明如何将特定类的每个元素的背景图像设置为某些数据源提供的不同图像。 我在其他html元素上使用数据属性来存储图像网址，但你可以使用数组或对象......无论你想要什么。

请注意，此方法完全省略了第二个类，而是将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> 
  
 
It's not entirely clear what your use is but here is a contrived example of how to set the background image of each element with a particular class to a different image provided by some data source. I'm using data attributes on other html elements to store the image urls but you could use an array or an object ....whatever you want really.
 
Note that this method leaves out the second class altogether and instead uses eq() with the class we already have.
 
 
 
  
  
$('.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>