jquery css選擇器添加類與div的背景圖像

我正在使用Google Maps API V3中的高級地圖應用程序。我爲地圖上的引腳使用了一系列字母標記（A-J）。我寫了一些jQuery來抓取每個包含標記作爲背景圖像的div添加一個不同的類，以便我可以爲標記添加動畫。這裏是我用來做到這一點的代碼：jquery css選擇器添加類與div的背景圖像

$('.markersHolder > div').each(function(){ 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerA.png)'){ 
      $(this).addClass('marker0'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerB.png)'){ 
      $(this).addClass('marker1'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerC.png)'){ 
       $(this).addClass('marker2'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerD.png)'){ 
       $(this).addClass('marker3'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerE.png)'){ 
       $(this).addClass('marker4'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerF.png)'){ 
       $(this).addClass('marker5'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerG.png)'){ 
       $(this).addClass('marker6'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerH.png)'){ 
       $(this).addClass('marker7'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerI.png)'){ 
       $(this).addClass('marker8'); 
      } 
      if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerJ.png)'){ 
       $(this).addClass('marker9'); 
       return false; 
      } 
     });

這適用於Firefox，但不適用於其他瀏覽器。任何人都有任何線索如何讓這個在其他瀏覽器中工作？謝謝！

來源

2010-07-16 abemonkey

試試這個。它應該找到背景圖像網址的「MarkerA」（等）部分，如果發現它，請使用大寫字母的字符代碼添加該類，以便計算您的1,2,3等等「標記」類（我沒有測試過）：

$('.markersHolder > div').each(function(){ 

    var mark = $(this).css('background-image').match(/Marker./); 
    if(mark) { 
    $(this).addClass("marker"+(mark[0].charCodeAt(mark[0].length-1)-65)); 
    } 
});

添加了這個上編輯：

如果你的類名稱相匹配的映像名稱mcgrailm中佩卡的評論所說那麼它可能是隻是：

$('.markersHolder > div').each(function(){ 
    var mark = $(this).css('background-image').match(/Marker./); 
    if(mark) { 
    $(this).addClass(mark[0]); 
    } 
});

來源

2010-07-16 19:19:44 ScottS

Doh，打了我堅實的10分鐘，而我擺弄我的正則表達式字符串 – 2010-07-16 19:32:06

是的，這也花了我幾分鐘:-) – ScottS 2010-07-16 19:37:15

謝謝夥計們！我會給這個旋轉！ – abemonkey 2010-07-16 19:53:58

我將瀏覽器alert()$(this).css('background-image') - 我敢打賭，不同的瀏覽器以不同的方式返回它，例如，引用：

'url("http://www.axtsweapons.com/gmarkers/red_MarkerJ.png")'

這可能是因爲你必須搜索的圖像名稱在URL字符串，而不是使一個確切的比較。

來源

2010-07-16 18:46:11

+1搜索，而不是做一個精確匹配聽起來像是一個更強大的解決方案。不過，我仍然認爲這裏有太多的代碼重複。 – Anurag 2010-07-16 18:54:18

@Anurag它絕對是：這將是一個陣列中最好的。 – 2010-07-16 18:58:05

好的。我對jQuery有點新鮮，我希望能夠像上面引用的那樣（J.png）在圖像名稱末尾搜索該字母？我怎麼寫這個？ – abemonkey 2010-07-16 18:59:29

如果只是這個重複的代碼，你應該能夠使用正則表達式

$(".markersHolder > div").each(function() { 
     var r = new RegExp("^url\\(.{0,1}http://www.axtsweapons.com/gmarkers/red_Marker([A-Z]).png.{0,1}\\)"); 
     var s = $(this).css('background-image'); 
     var x = s.match(r); 
     if (x) { 
      var charToInt = x[1].charCodeAt(0) - 65; 
      $(this).addClass('marker' + charToInt); 
     } 
});

它提取圖像url中的red_marker後面的字母，並將其轉換爲適當的數字以找到正確的類。您可能希望縮小.{0,1}一部分，.可能過於寬泛（我想象的空白，'和"應該是唯一的情況下）

來源

2010-07-16 19:30:35

jquery css選擇器添加類與div的背景圖像

回答

相關問題