Как изменить изображение при наведении нескольких изображений

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

Вот как я мог бы сделать что-то подобное с прослушивателями событий и действительно простой функцией обмена.Вы также можете сделать это с помощью 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;
}

Answer 2

Хотя то, что вы сделали, работает нормально, код выглядит немного более грязным. Решение для чистого, хорошо организованного кода будет таким. Во-первых, вы должны учитывать, что вы можете использовать одну функцию javascript для обработки всех 8 событий, поскольку они принадлежат связанной логической группе. например, вы должны были использовать функцию javascript и использовать параметр события e, чтобы идентифицировать инициированное событие, а затем использовать switch или любую другую подходящую управляющую структуру для обработки событий из различных элементов пользовательского интерфейса.

ПРИМЕЧАНИЕ: другой подход, который я бы порекомендовал, - это использование библиотеки jquery. Потому что он оптимизирован для такого типа вещей.