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函数并使用discardWrongNumber(phone: string): [string, Result] { if (phone.length > 12) { return [phone, Result.tooLong]; } else if (phone.length < 4) { return [phone, Result.tooShort]; } else if (phone.length === 12) { if (phone.includes('15')) { return [phone.replace('15', ''), Result.ok]; } } return [phone, Result.ok]; }事件参数来标识触发的事件，然后使用it('should return number too long', inject([NormalizadorService], (service: NormalizadorService) => { expect(service.discardWrongNumber('3511512368228')) .toBe(['3511512368228', Result.tooLong]); }));或任何其他合适的控件结构来处理来自不同UI元素的事件。 / p>

注意：我推荐的另一种方法是使用e库。因为它已针对此类事物进行了优化。

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;
}

如何在多张图片上悬停时更改图片

2 个答案: