javascript - jQuery 单击添加到图像的 src

Question

例如，我有两个图像，名为:-

<img alt="img-estate" src="images/estate.png" />

<img alt="img-saloon" src="images/saloon.png" />

单击这些图像中的任何一个时，我希望能够更改 src 以在单击时添加 -active。

因此，如果我单击#img-estate，图像 src 应该为 images/estate-active.png。所以基本上它会读取原始的 src 位置并在点击时添加 -active 。

我该如何使用 jQuery 来做到这一点？

Answer 1

点击后，以下内容将有效地切换 -active 字符串:

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

如果您只想添加该字符串:

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

要将其仅应用于问题中列出的元素，您可以将选择器修改为:

$('img[alt^="img-"]')

仅选择 alt 属性以字符串 img- 开头的图像。

顺便说一句，如果您更喜欢使用 jQuery attr() 方法，则不必两次调用相同的方法，只需使用匿名函数即可:

$('img[alt^="img-"]').attr('src', function(index, currentSrc){
    return currentSrc.replace('.png', '-active.png');
});

引用文献:

• attr() .
• attribute-starts-with ([attribute^="value"]) .
• click() .
• String.replace() .