如何使用 jQuery 或 JS 更改 img src onclick

Posted 2023-05-08

【中文标题】如何使用 jQuery 或 JS 更改 img src onclick

【英文标题】：How to alter img src onclick using jQuery or JS

【发布时间】：2022-01-15 04:51:30

【问题描述】：

我有多个带有 src URL 的图片

....content/..._gal6.jpg?format=100w

如何使用 jQuery 或 JS 将所​​有 URL 更改为以结尾

?format=2500w

点击？

【参考方案1】：

像这样

document.querySelectorAll("img").forEach(img => 
  const url = new URL(img.src);
  if (url.searchParams.get("format")) 
    url.searchParams.set("format", "2500w")
    console.log(url.toString())
    img.src = url.toString()
    
)

<img src="bla.jpg?format=250w">
<img src="bla.jpg">
<img src="bla.jpg?format=350w">

【参考方案2】：

使用 javascript：

改变图片的src属性：

function changeImage()
document.getElementById('test-image').src = "https://url-to-second-image.com/image.png";

您可以使用html中的点击事件调用该函数：

    <img id="test-image" src="the-url/first_image.jpg" onclick="changeImage()">

这是一个 jsfiddle：https://jsfiddle.net/f5mwext3/2/

同样的方式你可以只更改部分名称（为了方便，我使用整个外部文件）