如何使用jQuery attr()方法修改src属性时保留原值并追加内容

核心用jQuery .attr() 方法的回调函数特性，直接在回调里拿到原有属性值做拼接即可，不需要额外单独读取属性，代码最简洁也不会误覆盖原有值。

对应场景的实现代码 #

需求为原有src值为abc，追加de后得到abcde，直接写：

// 补全了示例里缺失的选择器闭合单引号
$('image').attr('src', function(_, originalValue) {
  return originalValue + 'de'
})

执行后元素的src属性就会从原来的abc变成abcde，完全符合预期。

写法说明 #

• .attr(属性名, 回调函数) 是jQuery原生支持的用法，会自动遍历选中的所有元素：
  • 回调的第二个参数就是当前元素对应属性的原始值，不需要提前手动调用.attr('src')单独读取
  • 回调函数return的内容，就是最终设置到属性上的新值
• 如果是普通HTML页面的图片标签，注意标签名是<img>不是<image>，选择器要改成$('img')，<image>是SVG内的图片标签，别写错选择器导致选不到元素。

兼容旧版本写法（不推荐） #

如果是非常老的jQuery版本不支持attr传回调，也可以先读旧值再拼接赋值，效果一致但多了一次属性读取操作：

const oldSrc = $('image').attr('src')
$('image').attr('src', oldSrc + 'de')

小提示：如果拼接的是文件路径/URL，记得检查原有值末尾和追加内容开头有没有重复的分隔符（比如/、.），避免拼出无效路径。

内容的提问来源于stack exchange，提问作者kyung