jquery css选择器将Class添加到具有背景图像的div

Question

我正在使用 Google Maps API V3 开发高级 map 应用程序。我使用一系列字母标记作为 map 上的图钉 (A-J)。我编写了一些 jQuery 来为每个包含标记作为背景图像的 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 中完美运行，但在其他浏览器中不起作用。有人知道如何让它在其他浏览器中工作吗？谢谢!

Answer 1

试试这个。它应该找到背景图像 URL 的“MarkerA”(等)部分，如果找到，则使用大写字母的字符代码添加类，以计算您的 1、2、3 等。 “marker”类(我没有测试过):

$('.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 在 Pekka 的评论中建议的那样将类名称与图像名称相匹配，那么它可能只是:

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