jQuery image replace - help fixing code

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> 

Может ли кто-нибудь помочь мне и предложить ва y, чтобы заменить эти изображения через фоновое изображение css. Мысль у меня было удалить CSS тег фона изображения из .map-града и просто поставить это как следующее:

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