Блог

Главная - Вопросы по программированию - Как изменить img src onclick с помощью jQuery или JS

Как изменить img src onclick с помощью jQuery или JS

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть несколько изображений с URL-адресами src, которые все имеют

 ....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";
}

Вы можете вызвать функцию, используя событие click в html:

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

Вот jsfiddle: https://jsfiddle.net/f5mwext3/2 /

Таким же образом вы можете изменить только часть имени (для удобства я использую целые внешние файлы)

Метки: