使用JQuery更改具有动态类的元素的CSS

海斯耶夫

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

韦斯利·史密斯

尚不清楚您的用途是什么,但这是一个人为的示例,说明如何将具有特定类的每个元素的背景图像设置为某些数据源提供的不同图像。我在其他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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章