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

Question

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

这背后的原理是，当您单击地址的文本时， map 会更改为该特定地址的 map 图像。 但是，我目前在图像上使用渐变叠加，实际 map 是使用 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')