jQuery - 单击更改图像src

Question

我希望能够通过单击两个不同元素来更改图像的src以从一个图像更改为活动图像。

例如，如果有一个.vehicle降序排序包装或.vehicle-PIC-包被点击我希望能够到这个div内改变图像的URL从images/saloon-outline.png到images/saloon-outline-active.png，并与所有其他汽车一样图片。

因此，举例来说，如果我点击的轿车图像的URL更改为轿车外形，active.png，但如果我再单击行政级轿车的形象，它改变了行政形象，以execsaloon-outline-active.png的SRC，和所有其他图像恢复到正常状态（没有 - 活动）。下面是HTML： -

<div id="div-vehicle-wrap"> 

    <div id="div-Car" class="vehicle-item ui-corner-all req-wrapper"> 

    <div class="vehicle-pic-wrap ui-corner-left req-display success"> 

    <img class="vehicle-pic-ie6-png" height="100" width="120" alt="Standard Saloon" src="images/saloon-outline.png"> 

    </div> 

    <div class="vehicle-desc-wrap req-display success"> 

    <div class="vehicle-radio-wrap"> 

    <div class="vehicle-accept-wrap"> 

</div> 

<div id="div-Exec" class="vehicle-item ui-corner-all req-wrapper"> 

    <div class="vehicle-pic-wrap ui-corner-left req-display success"> 

    <img class="vehicle-pic-ie6-png" height="100" width="120" alt="Executive Saloon" src="images/execsaloon-outline.png"> 

    </div> 

    <div class="vehicle-desc-wrap req-display success"> 

    <div class="vehicle-radio-wrap"> 

    <div class="vehicle-accept-wrap"></div> 

</div> 

到目前为止，我有以下几点： -

 $('img').click(function(){ 
      var src = this.src; 
      this.src = src.indexOf('-active') == -1 ? src.replace('.png','-active.png') : src.replace('-active.png','.png'); 
     }); 

这不会改变没有主动图像回原来src和仅改变对点击图像实际的图像而不是两个包装类; .vehicle-desc-wrap or .vehicle-pic-wrap

如果有人能帮助我，这将非常感激。

这里是一个网站的链接：LINK

Answer 1

尝试

$(function(){ 
    var regexactive = /-active\..*$/; 

    var ct = $('#div-vehicle-wrap'); 
    var imgs = $('.vehicle-pic-wrap img', ct); 

    function deactiveImage(imgs){ 
     imgs.each(function(){ 
      var img = $(this); 
      var src = img.attr('src'); 
      if(regexactive.test(src)){ 
       img.attr('src', src.replace('-active.', '.')) 
      } 
     }); 
    } 

    function activateImage(imgs){ 
     imgs.each(function(){ 
      var img = $(this); 
      var src = img.attr('src'); 
      if(!regexactive.test(src)){ 
       img.attr('src', src.replace('.png', '-active.png')) 
      } 
     }); 
    } 

    ct.on('click', '.vehicle-desc-wrap', function(){ 
     var item = $(this).closest('.vehicle-item'); 
     deactiveImage($('.vehicle-pic-wrap img', item)); 
    }); 

    ct.on('click', '.vehicle-pic-wrap', function(){ 
     var item = $(this).closest('.vehicle-item'); 

     var img = $('.vehicle-pic-wrap img', item); 
     deactiveImage(imgs.not(img)) 
     activateImage(img); 
    }); 
}) 

演示：Fiddle