У меня есть этот код, который позволяет мне наводить на ссылки в другом div и менять изображения в другом div. HTML-код в одном разделе страницы выглядит следующим образом:

{amp}lt;div class="left-column"{amp}gt; {amp}lt;ul class="nav-lists"{amp}gt; {amp}lt;li class="menu-1 "{amp}gt; {amp}lt;a href="#" title="The Studio"{amp}gt;Home{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="menu-2 "{amp}gt; {amp}lt;a href="#" title="Services"{amp}gt;About{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="menu-3 "{amp}gt; {amp}lt;a href="#" title="Portfolio"{amp}gt;Services{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="menu-4 "{amp}gt; {amp}lt;a href="#" title="Contact"{amp}gt;Contact{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; 

В другом разделе страницы, у нас есть изображения

 {amp}lt;div class="right-column menu-img"{amp}gt; {amp}lt;img class="fade menu-img1 " src="images/5.jpg" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade menu-img2 " src="images/4.jpg" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade menu-img3 " src="images/6.jpg" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade menu-img4 " src="images/7.jpg" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;/div{amp}gt; 

У меня есть этот CSS, который скрывает изображения при загрузке страницы

 .menu-img { position: relative; width: 100%; height: 500px } .menu-img img { opacity: 0; max-width: none; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 

Наконец, мне добавили этот jquery, чтобы показывать изображения при наведении списка. Это работает хорошо, но у меня есть ощущение, что код jquery написан не оптимально (я все еще учусь). Особенно, если мы хотим добавить больше ссылок и изображений, коды будут длиннее. Может ли кто-нибудь помочь мне оптимизировать этот код таким образом, чтобы он не оказывал негативного влияния на загрузку страницы?

 jQuery(function($) { $('.menu-1').hover(function () { $(".menu-img1").css("opacity", "1"); }, function () { $(".menu-img1").css("opacity", "0"); }); $('.menu-2').hover(function () { $(".menu-img2").css("opacity", "1"); }, function () { $(".menu-img2").css("opacity", "0"); }); $('.menu-3').hover(function () { $(".menu-img3").css("opacity", "1"); }, function () { $(".menu-img3").css("opacity", "0"); }); $('.menu-4').hover(function () { $(".menu-img4").css("opacity", "1"); }, function () { $(".menu-img4").css("opacity", "0"); }); }) 

Я это то, что ты ожидал

Присвойте уникальный идентификатор элементам li и одинаковое имя класса всем элементам li.

 $('.menu').hover(function () { $(".menu-" this.id).css("opacity", "1"); }, 

Вышеуказанная функция используется для получения идентификатора элемента hovered. И затем он объединяется с именем класса (.menu).

Пример: если первый элемент li найден, то можно получить идентификатор этого элемента, т. Е. This.id дает img1, а затем он соединяется с именем класса .menu, он дает .menu-img1. наконец, непрозрачность .menu-img будет установлена ​​на 1.

 jQuery(function($) { $('.menu').hover(function () { $(".menu-" this.id).css("opacity", "1"); }, function () { $(".menu-" this.id).css("opacity", "0"); }); }) 
 .menu-img { position: relative; width: 100%; height: 500px } .menu-img img { opacity: 0; max-width: none; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 
 {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div class="left-column"{amp}gt; {amp}lt;ul class="nav-lists"{amp}gt; {amp}lt;li class="menu" id="img1"{amp}gt; {amp}lt;a href="#" title="The Studio"{amp}gt;Home{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="menu" id="img2"{amp}gt; {amp}lt;a href="#" title="Services"{amp}gt;About{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="menu" id="img3"{amp}gt; {amp}lt;a href="#" title="Portfolio"{amp}gt;Services{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="menu" id="img4" {amp}gt; {amp}lt;a href="#" title="Contact"{amp}gt;Contact{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="right-column menu-img"{amp}gt; {amp}lt;img class="fade menu-img1 " src="https://dummyimage.com/600x400/000/fff{amp}amp;text=1" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade menu-img2 " src="https://dummyimage.com/600x400/000/fff{amp}amp;text=2" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade menu-img3 " src="https://dummyimage.com/600x400/000/fff{amp}amp;text=3" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade menu-img4 " src="https://dummyimage.com/600x400/000/fff{amp}amp;text=4" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;/div{amp}gt; 

Так как я видел ваш ответ на открытость для ванильного JavaScript как:

Конечно! Я тоже открыт для этого, пока достигаю того же результата

Я пойду с ванильным путем JS!

Вот кодекс, демонстрирующий его https://codepen.io/nateonguitar/pen/bGNWdmM

Похоже, вы создали класс для каждого изображения, а затем вы управляете каждым из них по отдельности. Прелесть классов в том, что они могут привести к одному и тому же поведению нескольких элементов без переписывания чего-либо, поэтому я чувствую, что классы здесь немного неправильно используют

Попробуйте это

(Я использую изображения-заполнители, чтобы они отображались на моей машине)

(обратите внимание на отсутствие классов на элементах {amp}lt;li{amp}gt; )

Я прикрепил атрибут данных к каждому элементу {amp}lt;ul{amp}gt; чтобы мы могли использовать его как параллельный массив в списке изображений:

 {amp}lt;div class="left-column"{amp}gt; {amp}lt;ul class="nav-list"{amp}gt; {amp}lt;li data-index="0"{amp}gt; {amp}lt;a href="#" title="The Studio"{amp}gt;Home{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li data-index="1"{amp}gt; {amp}lt;a href="#" title="Services"{amp}gt;About{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li data-index="2"{amp}gt; {amp}lt;a href="#" title="Portfolio"{amp}gt;Services{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li data-index="3"{amp}gt; {amp}lt;a href="#" title="Contact"{amp}gt;Contact{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; 

И нам не нужны соответствующие значения в другом списке.

 {amp}lt;div class="right-column menu-img"{amp}gt; {amp}lt;img class="fade" src="https://via.placeholder.com/150/0000FF/808080" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade" src="https://via.placeholder.com/150/00FFFF/808080" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade" src="https://via.placeholder.com/150/FF00FF/808080" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;img class="fade" src="https://via.placeholder.com/150/00FF00/808080" alt="javascript - изменение изображения в div, наведя на ссылки в другом div, используя jQuery" /{amp}gt; {amp}lt;/div{amp}gt; 

А вот JS, добавляющий прослушиватели событий для мыши, вход и выход

 document.addEventListener("DOMContentLoaded", function(event) { let navList = document.querySelector(".nav-list").children; let imgList = document.querySelector(".menu-img").children; for (let li of navList) { li.addEventListener('mouseenter', () ={amp}gt; { let img = imgList[li.dataset.index]; img.style.opacity = 1; }); li.addEventListener('mouseleave', () ={amp}gt; { let img = imgList[li.dataset.index]; img.style.opacity = 0; }); } }); 

Мы также могли бы достичь того же эффекта без атрибутов data-index если бы наш цикл for был традиционным для, [вы знаете, for (let i=0, i{amp}lt;navList.length; i ) . . . for (let i=0, i{amp}lt;navList.length; i ) . . . ]

Я бы добавил добавить к изображению атрибут данных, который соответствует значению класса в {amp}lt;li{amp}gt; . Например, data-menu-class=“menu-1” . Затем используйте одну функцию наведения на пункты списка меню. Используйте var menuClass = $(this).attr(“class”) чтобы получить класс наведенного элемента, а затем обновите непрозрачность соответствующего изображения, используя соответствующий атрибут данных из изображения — $('img[data-menu-class=“' menuClass '”]' . Цель всего этого состоит в том, чтобы не повторяться и применять функцию события зависания ко всем пунктам меню. Извините за отсутствие полностью набранной функции. В настоящее время на моем телефоне нет настоящая клавиатура.