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元素上使用数据属性来存储图片网址，但你可以使用数组或对象....无论你想要什么。

请注意，此方法完全省略了第二个类，而是将eq()与我们已有的类一起使用。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我现在解决了，答案非常简单。我所要做的就是放置JQuery.css行 AFTER 将className赋予该元素。我还将className更改为className：'s'+ index而不是'tempPanel s'+ index。

非常感谢您的回答。

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

2 个答案: