2

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

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

因此，例如，如果我单击轿车图像，则 url 将更改为 saloon-outline-active.png，但如果我随后单击行政轿车图像，它将行政图像的 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 or .vehicle-pic-wrap

如果有人可以帮助我，那将不胜感激。

这是网站的链接：LINK

4

1 回答 1

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);
    });
})

演示：小提琴

于 2013-04-21T10:09:25.427 回答