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

Question

我有一个图像列表，当我将鼠标悬停在它上面时，我想要被更改，然后在鼠标离开时更改回上一个图像。每个图像都是不同的。我已经做过了，但这不是正确的方法。我想不出正确的方法。

//html代码:这实际上是一个很长的列表，但我只显示了其中的两个//

       <li>
        <div class="card">
              <img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans"onmouseover="hover1()" onmouseout="offhover1()">
              <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" onmouseover="hover2()" onmouseout="offhover3()">
              <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代码//

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

    }
    function offhover1() {
      document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";

    }

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

    }
    function offhover2() {
      document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";

    }

    function hover3() {
      document.getElementById("my-img3").src = "./images/AMH011122_W-3-dresslink.jpg";

    }
    function offhover3() {
      document.getElementById("my-img3").src = "./images/AMH011122_W-1-dresslink.jpg";

    }

    function hover4() {
      document.getElementById("my-img4").src = "./images/AMH011200_W-3-dresslink.jpg";

    }
    function offhover4() {
      document.getElementById("my-img4").src = "./images/AMH011200_W-2-dresslink.jpg"; 
}

Answer 1

尽管您所做的工作很好，但代码看起来有点混乱。一个干净、组织良好的代码的解决方案应该是这样的。首先，您应该考虑您可以使用单个javascript函数来处理所有8个事件，因为它们属于一个相关的逻辑组。例如，您应该使用javascript函数并使用e事件参数来标识触发的事件，然后使用switch或任何其他合适的控制结构来处理来自不同UI元素的事件。

注意:我推荐的另一种方法是使用jquery库。因为它针对这类事情进行了优化。

Answer 2

下面是我如何使用事件侦听器和一个非常简单的交换函数来做类似的事情。你也可以用CSS来做这件事，根据你的情况，这可能是最好的。

window.onload = function bindEvents(){
  var img1 = document.querySelector('#my-img1');
  img1.addEventListener('mouseover', function(){swapImage(img1, "./images/AMH010301_G-5-dresslink.jpg")});
  img1.addEventListener('mouseout', function(){swapImage(img1, "./images/AMH010301_G-1-dresslink.jpg")});
}

function swapImage(el, elImg) {
  el.src = elImg;
}