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的背景图像

回答

相关问题