Как сменить изображение с помощью кнопки на jquery?

Question

Есть две кнопки, и к ним нужно привязать функцию смены картинки по нажатию

Чтоб я не пробовал у меня не получается сделать так, чтоб переключался продукт, последнее, что я попробовал:

 $(function() {
$('#btn').on('click', function() {
     $('#img').attr('img1.jpg', 'img2.jpg');
});
});

Answer 1

На Javascrip переключать картинки можно вот так, лёгким нажатием кнопки:

const img = document.getElementById("img");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");

btn1.disabled = true;

btn1.addEventListener('click', e => {
  img.src = "https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg";
  btn1.disabled = true;
  btn2.disabled = false;
});

btn2.addEventListener('click', e => {
  img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/306px-ISO_C%2B%2B_Logo.svg.png?20170928190710";
  btn1.disabled = false;
  btn2.disabled = true;
});

.container>img {
  width: 100px;
}

<div id="container" class="container"><img id="img" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Postgresql_elephant.svg" alt="postgresql"></div>
<div><button id="btn1"><<</button><button id="btn2">>></button></div>

Answer 2

В метод .attr() первым параметром передаётся название атрибута, а вторым его значение.

В случае для изменении изображения, требуется указать в название - .attr('src', 'ссылка на картинку');:

$('#btn').on('click', function() {
  $('#img').attr('src', 'img2.jpg'); // or img1.jpg
});

БЛОГ НА HUSL

Как сменить изображение с помощью кнопки на jquery?

Ответы (2 шт):