jQuery - 单击时更改图像 src

Question

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

例如，如果单击 .vehicle-desc-wrap 或 .vehicle-pic-wrap ，我希望能够从 images/saloon-outline.png 更改此 div 内的图像 url > 到 images/saloon-outline-active.png，与所有其他汽车图像相同。

例如，如果我单击沙龙图像，则 url 会更改为 saloon-outline-active.png，但如果我单击 Executive Saloon 图像，则会将执行图像的 src 更改为 execsaloon-outline -active.png，并将所有其他图像恢复到正常状态(没有 -active)。这是 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 或 .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