如何更改悬停状态下的多个图像列表

Question

我有一个图像列表，当我将鼠标悬停在它上面时，我想要被更改，然后在鼠标离开时更改回上一个图像。每个图像都是不同的。我已经这样做了，但只有当鼠标悬停在第一个项目上时，事件才会在两个图像上执行。我想不出正确的方法。

//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";

}

Answer 1

首先，您似乎只将您的事件附加到其中一个图像，而不是两个。下面的代码将遍历所有图像并将事件附加到它们。

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">

Answer 2

在每次迭代中，您选择相同的图像...

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" />

​

Answer 3

您是否在询问如何注册eventlisteners并能够回溯触发事件的元素？类似于：

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

(两条语句-一条用于事件，另一条用于元素)，然后根据选定的元素处理事件？