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

我想改变一个for-loop内的元素的CSS，以便循环中的每个元素得到不同的CSS。使用JQuery改变动态类的元素的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 +"')");

..because我希望每个元素都具有tempPanel和s X的CSS属性。然而，这不会给对象一个背景图像。如果我改变代码..

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

..所有元素都会得到相同的背景图片（显然）..

我怎能舍弃元素不同的背景和仍然适用tempPanel的CSS属性？

来源

2015-03-25 heisjef

请提供更多信息。这样的问题在SO – 0aslam0 2015-03-25 06:46:39

中将被忽略这样的问题？不知道我怎么能更好地解释自己.. – heisjef 2015-03-25 06:54:08

你认为你可以在http://jsfiddle.net/提供示例代码吗？这将有助于你和读者。 – 0aslam0 2015-03-25 06:56:18

这并不完全清楚你的使用是什么，但这里是一个人为的例子，如何设置每个元素的背景图像与特定的类到由某些数据源提供的不同图像。我在其他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>

来源

2015-03-25 07:30:29 DelightedD0D

非常感谢你帮助我，我真的很喜欢它。现在解决了它。 – heisjef 2015-03-25 07:39:18

我现在解决了它，答案是非常简单的。我所要做的就是将JQuery.css行放置在之后，className被赋予元素。我也将className改成了className：'s'+ index而不是'tempPanel s'+ index。

非常感谢您的回答。

来源

2015-03-25 07:38:07 heisjef

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

回答

相关问题