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

您是否在问如何注册事件监听器并能够回溯触发该事件的元素？像这样：

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

（2条语句-一个用于事件，另一个用于元素），然后根据所选元素来处理事件？

如何在悬停时更改多个图像的列表

3 个答案: