javascript - “替换”改变了整个源文件而不仅仅是结局......为什么？

Question

情况:我有十个灰色 div(每个都有图像和文本)作为按钮。我希望按钮在事件时具有较暗的文本和较暗的图像。当单击事件按钮时，我希望它停用。我还希望它在另一个按钮激活时停用。

问题:当我替换图像源上的结尾时，它将图像上的完整源更改为与事件源相同...这会将所有其他图像更改为相同的图标。

jsfiddle: http://jsfiddle.net/messedUP90/gtf1dk0m/

警告:jsfiddle 显示了我遇到的问题，所有其他图像都更改为相同，但由于某种原因，事件图像没有改变颜色。它在 Dreamweaver 中运行良好，所以我不太担心这一点。

$(document).ready(function(){
    var x = 300;
    $("[id^=pport]").click(function () {
        var src = $('.butt', this).attr('src');
        if($(this).hasClass('highlight')){
            $(this).removeClass('highlight');
            $('.butt', this).attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
        }
        else{
            $('.butt').removeClass('highlight');
            $('.butt').attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));
            $('.talk').fadeOut(x);
            $(this).addClass('highlight');
            $('.butt', this).attr('src', src.replace(/_light(\.[^.]+)?$/, '_dark$1'));
        }
    });
});

Answer 1

问题正如您所描述的 - 您正在更改 src每个图标都是src您点击的那个，只需交换 light与 dark .

即你早点设置var src = $('.butt', this).attr('src');

您绝对不会重新设置变量 src到其他任何事情。

然后你$('.butt').attr('src', src.replace(/_dark(\.[^.]+)?$/, '_light$1'));

这设置了 src所有带有 butt 的元素的属性类为单击图标的轻型版本。

这就是你的问题所在......

您需要循环遍历整组图像，而不是简单地一次性更改图像:

$('.butt').each( function( index ) {
    if ( $(this).attr('src') ) {
        $(this).attr('src', $(this).attr('src').replace(/_dark(\.[^.]+)?$/, '_light$1'));
    } 
});

Fiddle(可以工作，但具有与您相同的明/暗限制):http://jsfiddle.net/gtf1dk0m/1/