使用jQuery在另一个div中的链接上悬停以更改div中的图像

Question

我设置了这段代码，允许我在不同div中的链接上悬停，并在另一个div中更改图像。页面中一个部分的HTML代码如下所示：

<div class="left-column">
    <ul class="nav-lists">
        <li class="menu-1 ">
            <a href="#" title="The Studio">Home</a>
        </li>
        <li class="menu-2 ">
            <a href="#" title="Services">About</a>
        </li>
        <li class="menu-3 ">
            <a href="#" title="Portfolio">Services</a>
        </li>
        <li class="menu-4 ">
            <a href="#" title="Contact">Contact</a>
        </li>
    </ul>
</div>

在页面的另一部分，我们得到了图像。

<div class="right-column menu-img">
    <img class="fade menu-img1 " src="images/5.jpg" alt="" />
    <img class="fade menu-img2 " src="images/4.jpg" alt="" />
    <img class="fade menu-img3 " src="images/6.jpg" alt="" />
    <img class="fade menu-img4 " src="images/7.jpg" alt="" />
</div>

我有一个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");
    });
})

Answer 1

我这就是你所期待的

为li元素分配唯一的id，为所有li元素分配相同的类名。

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

上述函数用于获取悬停元素的id。然后将它与类名(.menu)连接起来。

示例:如果第一个li元素悬停，则可以获得该元素的id --即this.id给出img1，然后将其与类名.menu连接起来，给出..menu img1 1。最后，..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%);   
}

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  

<div class="left-column">
    <ul class="nav-lists">
        <li class="menu" id="img1">
            <a href="#" title="The Studio">Home</a>
        </li>
        <li class="menu"  id="img2">
            <a href="#" title="Services">About</a>
        </li>
        <li class="menu" id="img3">
            <a href="#" title="Portfolio">Services</a>
        </li>
        <li class="menu" id="img4" >
            <a href="#" title="Contact">Contact</a>
        </li>
    </ul>
</div>



<div class="right-column menu-img">
    <img class="fade menu-img1 " src="https://dummyimage.com/600x400/000/fff&text=1" alt="" />
    <img class="fade menu-img2 " src="https://dummyimage.com/600x400/000/fff&text=2" alt="" />
    <img class="fade menu-img3 " src="https://dummyimage.com/600x400/000/fff&text=3" alt="" />
    <img class="fade menu-img4 " src="https://dummyimage.com/600x400/000/fff&text=4" alt="" />
</div>

​

Answer 2

因为我看到你对香草JavaScript开放的反应是：

当然！只要我取得同样的结果，我也会接受的。

我要用香草JS的方式！

下面是https://codepen.io/nateonguitar/pen/bGNWdmM的代码演示

看起来您已经为每个图像创建了一个类，然后您将对每个图像进行单独的控制。类的美妙之处在于，它们可以使相同的行为发生在多个元素上，而无需重写任何东西，所以我觉得类在这里被滥用了。

试试这个

(我使用占位符图像，所以它们会出现在我自己的机器上)

(注意<li>元素中缺少类)

我在<ul>的每个元素上附加了一个数据属性，这样我们就可以像并行数组一样在图像列表中使用它：

<div class="left-column">
    <ul class="nav-list">
        <li data-index="0">
            <a href="#" title="The Studio">Home</a>
        </li>
        <li data-index="1">
            <a href="#" title="Services">About</a>
        </li>
        <li data-index="2">
            <a href="#" title="Portfolio">Services</a>
        </li>
        <li data-index="3">
            <a href="#" title="Contact">Contact</a>
        </li>
    </ul>
</div>

我们不需要另一个列表中相应的值。

<div class="right-column menu-img">
    <img class="fade" src="https://via.placeholder.com/150/0000FF/808080" alt="" />
    <img class="fade" src="https://via.placeholder.com/150/00FFFF/808080" alt="" />
    <img class="fade" src="https://via.placeholder.com/150/FF00FF/808080" alt="" />
    <img class="fade" src="https://via.placeholder.com/150/00FF00/808080" alt="" />
</div>

下面是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', () => {
      let img = imgList[li.dataset.index];
      img.style.opacity = 1;
    });
    li.addEventListener('mouseleave', () => {
      let img = imgList[li.dataset.index];
      img.style.opacity = 0;
    });
  }
});

如果我们的for循环是传统的for，您知道，如果没有data-index属性，我们也可以实现同样的效果。

Answer 3

我会向图像中添加一个数据属性，该图像与<li>上的类值匹配。例如，data-menu-class=“menu-1”。然后，在菜单列表项上使用单个悬停函数。使用var menuClass = $(this).attr(“class”)获取悬停元素的类，然后使用图像- $(‘img[data-menu-class=“‘+menuClass+’”]’中的匹配数据属性更新相应图像的不透明度。所有这些的目标是不必重复自己，并使悬停事件功能应用于所有菜单项。请原谅没有全类型函数。目前我的手机上没有真正的键盘。