将字符串注入src属性

Question

我试图使用jQuery添加到多个图像的src，如下所示：

<img src="image.jpg">

到

<img src="image-thumb.jpg">

出于某种原因，我似乎无法解决这个问题。

有什么想法吗？

Answer 1

$('#something img').each(function() {

   var src = $(this).attr('src').replace(/(\.\w*)$/, '-thumb$1');

   $(this).attr({ src: src });

});

See it

Idealmachine在his answer中的最后一个例子是一种更干净的方式来做我上面提到的（即如果这是你在img元素上进行的唯一操作）。

所以我们都记得......

• attr()可以将函数作为其第二个参数 - 使这些事情变得更容易。
• $&是对整个匹配字符串的反向引用 - 不需要像我一样用括号括起来。

Answer 2

首先，将一个类添加到您希望脚本影响的img标记中（例如<img src="image.jpg" class="foo">）。

然后，使用jQuery的.attr() method设置所需的所有img标记的src属性：

$('.foo').attr('src', 'image-thumb.jpg');

如果您的图片名称不同，并且您只想一次向每个图像添加-thumb，请使用回调函数：

$('.foo').attr('src', function(index, attr) {
    return attr.replace(/\.[^.]*$/, '-thumb$&');
});

在第二个代码示例中，我使用正则表达式来查找和替换图像URL的结尾。

Answer 3

如果您知道图片的ID，可以使用$("#img").attr("src","second.jpg");

您还可以使用$("#img").attr("src");访问src属性。其余的只是替换字符串。