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

我有一个图像列表，当我将鼠标悬停在上面时，我希望被更改，然后在鼠标离开时更改回上一个图像。每个图像都是不同的。我已经完成了，但是只有当鼠标悬停在第一个项目上时，事件才会在两个图像上执行。而我却找不到正确的方法

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

洛雷姆1
$24.99
$17.99


Lorem ipsum dolor sit amet

添加到购物车


洛雷姆2
$24.99
$14.99


Lorem ipsum dolor sit amet

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

}

let img=document.queryselectoral（'.card img'）；
对于（变量i=0；i

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

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

---

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

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

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

最后，为了使每个图像都有不同的图像可以在“开”和“关”悬停之间切换，您需要将该信息存储在与图像连接的某个位置。我选择使用如上所示的数据属性。因此，图像的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">

---

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

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

您硬编码了两个图像以在鼠标上更改，因此不确定问题出在哪里……

img[i]=document.querySelector（'.my img'）。addEventListener（'mouseover'，hover）没有任何意义。问题是，当我将鼠标悬停在其中任何一个图像上时，事件都会发生在这两个图像上，这是我不希望看到的。我希望在我悬停的图像上执行每个事件。所以基本上当我停留在图像一上。图像2也被悬停。您正在将事件绑定到每个循环上的同一个精确图像<代码>文档。查询选择器（'.my img'）

正在选择相同的图像。您的代码正在更改图像2<代码>document.getElementById（“my-img2”）.src=“./images/AMH010327_W-5-dresslink.jpg”位于悬停代码中，它不知道不应该仅为某个特定的图像更改它。epascarello。我刚刚编辑的代码实际上是我的错误，但问题仍然存在。Thankx Brother使用属性很简单也很干净，但我把它弄得很复杂。没问题！我将研究使用jQuery，因为它将使您所做的很多事情变得更简单。

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