Как сделать фон CSS CSS динамическим с помощью JQuery - PullRequest
0 голосов
/ 14 февраля 2012

У меня есть карта Google с пронумерованными булавками.Булавки красного цвета на карте.Фактические адреса на странице должны иметь серые маркеры.Я пытаюсь использовать свойство background для элемента address «LocationName», который содержит адрес для прикрепления серого маркера фонового изображения (без повторения левого центра).изображения называются greymarker1, greymarker2 и т. д., поэтому, если это первый адрес, greymarker1.png должен быть значком перед адресом ONE.Я могу установить свойство background css с помощью jquery, но я не уверен, как сделать URL-адрес динамическим .. '/ Библиотека стилей / Изображения / дизайн / иконки / greymarker1.png') 1 в URL-адресе должен измениться со счетчиком ..когда счетчик равен 1, он должен получить greymarker1.png и т. д.

 $('.LocationName').each(function(index){
    var counter=index+1;
    //$(this).css('color', 'blue');
    $(this).css("background-image", "url('/Style Library/Images/design/icons/greymarker1.png')");  

 });

Ответы [ 2 ]

5 голосов
/ 14 февраля 2012
$('.LocationName').each(function(index){
    $(this).css("background-image", 
       "url('/Style Library/Images/design/icons/greymarker" + index + ".png')");
});
0 голосов
/ 14 февраля 2012

Не уверен, что вы пытаетесь достичь здесь, но это кажется достаточно простым, вы можете прикрепить счетчик или номер индекса класса для имени изображения, например:

 var path = '/Style/Library/Images/design/icons/greymarker';
 $('.LocationName').each(function(index){
    var counter=index+1;
    //$(this).css('color', 'blue');
    $(this).css("background-image", "url(" + path + counter + '.png')");  

 });

Вы можете добавить столько значений в свой CSS, создав список атрибутов и значений, подобных этому

 var path = '/Style/Library/Images/design/icons/greymarker';
     $('.LocationName').each(function(index){
        var counter=index+1;
                $(this).css({'background-image': 'url(' + path + counter + '.png)', 
                             'background-attribute': 'somevalue'
       });

     });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...