Блог

Главная - Вопросы по программированию - Как изменить только одно изображение с помощью Javascript

Как изменить только одно изображение с помощью Javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть изображение с двумя маленькими изображениями / кнопками поверх него. Каждое изображение / кнопка должны изменять основное изображение либо на исходное изображение, либо на альтернативное изображение. У меня есть небольшая функция javascript, чтобы заставить ее работать. Но проблема возникает, когда я хочу иметь 2 изображения с одинаковой функциональностью на одной странице. Кнопка изменяет все изображения одновременно. Есть ли простое решение, чтобы JS изменял изображение только внутри DIV, в котором нажата кнопка?

HTML:

     <div class="mobile-product-image-switcher">
      <img src="main-image.jpg" alt="" class="mobile-product-switcher-image" />
      <img src="switcher-button-1.jpg" alt="" class="switcher-button-1" onclick="changeImg('main-image.jpg')" />
      <img src="switcher-button-2.jpg" alt="" class="switcher-button-2" onclick="changeImg('main-image-2.jpg')" />
    </div>

<div class="mobile-product-image-switcher">
      <img src="main-image-3.jpg" alt="" class="mobile-product-switcher-image" />
      <img src="switcher-button-1.jpg" alt="" class="switcher-button-1" onclick="changeImg('main-image-3.jpg')" />
      <img src="switcher-button-2.jpg" alt="" class="switcher-button-2" onclick="changeImg('main-image-4.jpg')" />
    </div>

CSS:

 .mobile-product-image-switcher {
  position: relative;   
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  z-index: 1;
}

.mobile-product-switcher-image {
  position: relative;
  top: 0;
  left: 0;
}

.switcher-button-1 {
  position: absolute;
  bottom: 10px;
  right: 50px;
  width: 30px;
  height: 30px;
  z-index: 2;
  background-color: white;
  border-radius: 30px;
  padding: 5px;
  cursor: pointer;
}

.switcher-button-2 {
  position: absolute;
  bottom: 10px;
  right: 15px;
  width: 30px;
  height: 30px;
  z-index: 2;
  background-color: white;
  border-radius: 30px;
  padding: 5px;
  cursor: pointer;
}

JS:

 function changeImg(src){
    $('.mobile-product-image-switcher img.mobile-product-switcher-image').attr('src', src);}

Спасибо

Комментарии:

1. Вам необходимо отправить элемент button в функцию из обработчика события click, определенного встроенным в элемент. Вы можете сделать это, включив this , который ссылается на исходный элемент события. Затем вы можете применить селектор изображений к этому элементу и изменить только соответствующий.

2. @TravisJ Привет, спасибо. Не могли бы вы помочь, где я должен добавить this в код? Обычно я использую только HTML / CSS, поэтому я не знаю, как добавить его в код JS.

Ответ №1:

Я привел небольшой пример того, что Трэвис Джей прокомментировал в вашем вопросе

 function changeImage(src, context) { 
  context.parentElement.querySelector(".image")
    .setAttribute("src", "https://dummyimage.com/150/fefefe/888amp;text="   src);
} 
 <div>
  <img class="image" src="https://dummyimage.com/150/fefefe/888amp;text=1">
  <img src="https://dummyimage.com/80/fefefe/888amp;text=1" onclick="changeImage('1', this)">
  <img src="https://dummyimage.com/80/fefefe/888amp;text=2" onclick="changeImage('2', this)">
<div>

<div>
  <img class="image" src="https://dummyimage.com/150/fefefe/888amp;text=3">
  <img src="https://dummyimage.com/80/fefefe/888amp;text=3" onclick="changeImage('3', this)">
  <img src="https://dummyimage.com/80/fefefe/888amp;text=4" onclick="changeImage('4', this)">
<div>

Редактировать: возможно, вам придется внести несколько изменений, поскольку я не использую jQuery в этом примере, и я также добавляю префикс к src (только для примера).