Использование JQuery для изменения CSS элемента с динамическим классом

Я пытаюсь изменить CSS элемента внутри цикла for, чтобы каждый элемент цикла получал разные CSSes.Использование 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 Я хочу, чтобы каждый элемент имел свойства CSS как tempPanel, так и s X. Это, однако, не дает объектам фоновое изображение. Если я изменить код ..

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

.. все элементы получат то же фоновое изображение (очевидно) ..

Как я могу дать элементам другой фон и по-прежнему применять CSS свойства TempPanel?

источник

2015-03-25 heisjef

Просим предоставить дополнительную информацию. Такие вопросы будут игнорироваться в SO – 0aslam0

Такие вопросы? Не знаю, как я могу объяснить себя лучше. – heisjef

Как вы думаете, вы можете предоставить пример кода в http://jsfiddle.net/? Это поможет вам и читателям. – 0aslam0

Не совсем понятно, что вы используете, но вот надуманный пример того, как установить фоновое изображение каждого элемента с определенным классом на другое изображение, предоставленное некоторым источником данных. Я использую атрибуты данных на других элементах 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

Я решил это сейчас, и ответ довольно прост. Все, что мне нужно было сделать, это разместить строку JQuery.css ПОСЛЕ имя класса было присвоено элементу. Я также изменил className на className: 's' + index вместо индекса tempPanel s +.

Большое вам спасибо за ответ.

источник

2015-03-25 07:38:07 heisjef

Использование JQuery для изменения CSS элемента с динамическим классом

ответ

Смежные вопросы