不使用 jquery 替换 img src 属性

Posted 2023-03-05

【中文标题】不使用 jquery 替换 img src 属性

【英文标题】：not replacing the img src attribute using jquery

【发布时间】：2012-11-16 04:46:12

【问题描述】：

我正在使用 javascript 替换 img src 属性

我的代码是

<div class="reader" id="reader1"></div>    

    <img src="images/img_001.jpg"  id="image1"/>

</div> 

和javascript代码

$("#image1").attr("src").replace("images/img_001.jpg", "images/img_002.jpg");

src 属性没有被替换

【问题讨论】：

jQuery("#image1").attr("src", "/assets/arrow_small_left.png")

【参考方案1】：

不需要调用replace()，设置新的src即可：

$("#image1").attr("src", "images/img_002.jpg");

【参考方案2】：

见http://api.jquery.com/attr/#attr2：

$("#image1").attr("src", "images/img_002.jpg");

【参考方案3】：

或者你可以使用prop()

$("#image1").prop("src", "images/img_002.jpg");

Working Demo

【讨论】：

为什么？ src 是一个属性。

@David :) 难以置信，你可以使用 prop() 来设置 src... 看看工作演示，应该取消你的反对票

是的，你可以。但我的问题是为什么？使用prop 并不能解决问题，因为问题是语法错误。 attr() 使用完全正确，因为 src 是一个属性，就像 OP 发布的那样。

@David 你的问题是，为什么？ src 是一个属性。 src 是一个属性，你也可以使用 prop() 设置属性值

我知道你可以，但 prop 的用法并不完全正确。另外，这与这个问题无关，所以我认为它对海报没有任何价值。

【参考方案4】：

您可以使用更改值

$('#image1').attr('src', 'images/img_002.jpg');

如果您正在使用：

$('#image1').attr('src');

该函数将返回一个字符串。字符串不会通过引用传递，而是被复制。所以修改它实际上并没有改变它。

【讨论】：

"jQuery 没有 replace() 方法" - 没有，但 javascript 有！！

@Jamiec 啊是的，我根本没想到！编辑了我的答案。

【参考方案5】：

原因是replace 方法实际上返回了新字符串——而不是在原地编辑它。

你可以这样实现你想要的：

$("#image1").attr("src", function()
    return $(this).attr('src').replace("images/img_001.jpg", "images/img_002.jpg");
);

这通过调用函数（第二个参数）为src 属性设置一个新值。这个函数实际上是returns被替换的值。

实时示例（使用开发者工具检查 src）：http://jsfiddle.net/4K3Dy/

【讨论】：

不一定，我还是宁愿使用jQuery语法来读取函数内部的src属性。但我同意你的方式也行！

我相信你也可以function(i, src) return src.replace(...。

@david - 当然它会工作 - 检查这个小提琴中的 src：jsfiddle.net/4K3Dy - attr('src') 只是返回一个字符串，并且该字符串有一个 replace 方法！

【参考方案6】：

你可以直接设置src的值：

$("#image1").attr("src", "images/img_002.jpg");

http://jsfiddle.net/VFgn8/

看看jQuery doc for attr()。