jqueryを使ってバックグラウンドCSS URLを動的に作る方法

Question

私は番号付きピンを持つGoogleマップを持っています。ピンは赤い色です。ページ内の実際のアドレスは、マーカーがグレー表示されている必要があります。私は、灰色のマーカーの画像の背景（繰り返し左の中央）を添付するアドレスを保持するアドレス要素 "LocationName"に背景プロパティを使用しようとしています。イメージの名前はgreymarker1、greymarker2などです。したがって、最初のアドレスの場合、greymarker1.pngはアドレスの1つのアイコンのアイコンにする必要があります。 jqueryを使用してバックグラウンドCSSプロパティを設定することはできますが、URLを動的にする方法がわかりません。URL内の1はカウンタとともに変更する必要があります。 .whenカウンタは

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

}); 

Answer 1

$('.LocationName').each(function(index){ 
    $(this).css("background-image", 
     "url('/Style Library/Images/design/icons/greymarker" + index + ".png')"); 
}); 

Answer 2

...それはgreymarker1.pngなどをつかむ必要があり、1に等しくされ、あなたがここで達成しようとしているのかわからないのですが、それは十分に簡単なようで、あなたは カウンターまたはを添付することができます次のような画像名へのクラスインデックス番号：

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' 
     }); 

    });