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

【问题标题】：How to alter img src onclick using jQuery or JS如何使用 jQuery 或 JS 更改 img src onclick
【发布时间】：2022-01-15 04:51:30
【问题描述】：

我有多个带有 src URL 的图片

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

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

?format=2500w

点击？

【问题讨论】：

标签： javascript html jquery

【解决方案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/

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

【讨论】：