Как изменить список из нескольких изображений при наведении - PullRequest
Новая
       37

Как изменить список из нескольких изображений при наведении

0 голосов
/ 29 октября 2018

У меня есть список изображений, и я хочу, чтобы его изменили, когда я наведу на него курсор, а затем вернусь к предыдущему изображению при отпускании мыши. и каждое изображение отличается. Я сделал это, но событие выполняется на двух изображениях, только когда мышь наводит курсор на первый элемент. и я не мог понять правильный путь.

// HTML-код // 

      <li>
        <div class="card">
              <img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">
              <h1>Lorem1</h1>
              <span class="price-first">$24.99</span>
              <span class="price">$17.99</span>
              <br>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
              <p>Lorem ipsum dolor sit amet..</p>
              <button class="add-to">Add to Cart</button>
        </div>  
       </li>
       <li>
        <div class="card">
              <img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
              <h1>Lorem2</h1>
              <span class="price-first">$24.99</span>
              <span class="price">$14.99</span>
              <br>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
              <p>Lorem ipsum dolor sit amet..</p>
              <a href="product-page.html"><button class="add-to">Add to Cart</button></a>
        </div> 
       </li>

// JavaScript // 

 let img = document.querySelectorAll('.card img');

for (var i = 0; i < img.length; i++) {
     img[i].addEventListener('mouseover', hover);
     img[i].addEventListener('mouseout', leave);
}


function hover() {
    document.getElementById("my-img1").src = "./images/AMH010301_G-5-dresslink.jpg";
    document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg";

}

function leave() {

    document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";
    document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";

}

Ответы [ 3 ]

0 голосов
/ 29 октября 2018

Сначала кажется, что вы прикрепляете свое событие только к одному из изображений, а не к обоим. Приведенный ниже код будет перебирать все изображения и прикреплять к ним событие. 

let img = document.querySelectorAll('.card img');
for (var i = 0; i < img.length; i++)
{
    img[i].addEventListener('mouseover', hover);
    img[i].addEventListener('mouseout', leave);
}

Во-вторых, событие, которое вы прикрепляете к изображениям, не смотрит на то, какое изображение отображается, оно просто меняет изображения для них обоих. Следующий код будет смотреть на изображение, на которое вы наводите курсор, и только его изменять. 

function hover(e) { e.target.src = e.target.getAttribute("data-hover-img"); }
function leave(e) { e.target.src = e.target.getAttribute("data-leave-img"); }

И, наконец, для каждого изображения, для которого нужно включать и выключать разные изображения, необходимо хранить эту информацию в каком-либо месте, связанном с изображением. Я решил использовать атрибуты данных, как показано выше. Поэтому HTML-код для ваших изображений должен выглядеть следующим образом. 

<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" data-hover-img=""./images/AMH010301_G-5-dresslink.jpg"" data-leave-img="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">

<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" data-hover-img="./images/AMH010327_W-5-dresslink.jpg" data-leave-img="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
0 голосов
/ 29 октября 2018

На каждой итерации вы выбираете одно и то же изображение .... 

document.querySelector('.my-img')  <-- selects first image with the class

Таким образом, вы просто привязали указатель мыши к первому изображению несколько раз. Теперь, если вы исправили цикл, чтобы выбрать правильное изображение, у вас все еще будет проблема, потому что ваш код наведения не смотрит, знает, какое изображение вы наводите, и вы меняете все изображения внутри метода.

Таким образом, вы можете добавить логику в указатель мыши или просто упростить свой код.

То, что вы хотите сделать, это когда вы наводите курсор на изображение, оно меняется на другое изображение. Одна из самых простых вещей - использовать атрибуты данных и события мыши. 

document.querySelectorAll('[data-src2]').forEach(function (img) {
  img.addEventListener('mouseenter', function() {
    if (!img.dataset.src) {  // see if we hovered yet
      img.dataset.src = this.src  // if not set orginal source so we can flip back
    }
    img.src = this.dataset.src2  //set src to second image
  })
  img.addEventListener('mouseleave', function() {
    img.src = this.dataset.src  //set back to orginal
  })
})
<img src="https://placekitten.com/200/300" data-src2="https://placekitten.com/g/200/300" />

<img src="https://placekitten.com/200/200" data-src2="https://placekitten.com/g/200/200" />
0 голосов
/ 29 октября 2018

Вы спрашиваете, как зарегистрировать список событий и иметь возможность отследить, какой элемент вызвал событие? Что-то вроде: 

img[i] = document.querySelector('.my-img').addEventListener('mouseover', function() { theselectedElement=i; hover();});

(2 оператора - одно для события, а другое для элемента), а затем обрабатывать события в зависимости от выбранного элемента?

...