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

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