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')

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

1 个答案: