jQuery 图像替换 - 帮助修复代码

Question

我有一个代码可以在我的网站上工作。我目前正在使用带有 href="#image1" 锚标记的文本链接将特定 div 标记中的图像替换为另一个图像。

这背后的原理是，当您单击地址文本时，地图会变为该特定地址的地图图像。 但是，我目前在图像上使用渐变叠加，实际地图是使用 css 背景图像编码的。

.map-grad {
    background-image: url(../img/map.png);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src=//ssl.gstatic.com/s2/oz/images/local/map_gradient.png, sizingMethod=scale)";
    background: -webkit-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: -moz-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: -ms-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: -o-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background: linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png);
    background-position: center;
    height: 250px;
    max-height: 250px;
    max-width: 1600px;
}

我的 jQuery 是：

 var itemInfo = { // Initialise the item information
      img1: ['/img/map.png', ''],
      img2: ['/img/map2.jpg', ''],
};

$(function() {
      $('#maps a').click(function() { // When an item is selected
            var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID
            $('#info img').attr('src', itemInfo[id][0]); // Set the image
            $('#info p').text(itemInfo[id][1]); // And text
            return false; // Prevent default behaviour
      });
});

图片链接格式为：

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

实际被替换的图片如下：

<div class="map-grad">
    <div id="info">
        <img src="/img/map.png">
    </div>
</div>

谁能帮助我并建议一种通过css背景图像替换这些图像的方法。我的一个想法是从 .map-grad 中删除 background-image css 标签，然后简单地将其如下所示：

<div id="info">
<div class="map-grad" style="background-image: url(../img/map.png);"></div>
</div>

并编写 jQuery 代码来替换 css url 而不是它当前替换的 img src？ 有什么想法和帮助吗？ 谢谢

Answer 1

如果你需要替换所有的图像，我能想到的唯一方法就是这个

$.each($('*'), function( index, element ) {
   var element = $(element);
   if(element.css('background-image') === 'YourMap.png') {
      element.css('background-image', 'newMap.png');
   }
});

虽然使用类或其他东西而不是 * 会更好

编辑：如果您对所有图像都有一个类，您只需这样做

$('.myClass').css('background-image', 'newImg.png')