如何使用元素数据属性最小化函数重复？

Question

我的 jQuery 代码正在运行，但我想通过数据属性将其最小化。请参阅下面我的 HTML 和 jQuery 代码。

下面的函数最多重复四次，我想最小化/减少这种重复。提前致谢。

$('.nav-menu-list ul li:nth-child(1)').hover(function() {

  $('#item-01').fadeIn();

}, function() {

  $('#item-01').fadeOut();

});

$('.nav-menu-list ul li:nth-child(2)').hover(function() {

  $('#item-02').fadeIn();

}, function() {

  $('#item-02').fadeOut();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="nav-menu-list">

  <ul>

    <li data-id="item-01"><h2>home</h2></li>

    <li data-id="item-02"><h2>about us</h2></li>

    <li data-id="item-03"><h2>category</h2></li>

    <li data-id="item-04"><h2>news room</h2></li>

    <li data-id="item-05"><h2>blog</h2></li>

    <li data-id="item-06"><h2>contact us</h2></li>

  </ul>

</span>

<span class="nav-menu-list-details">

  <div id="item-01"><img src="images/home-preview.png" alt="" /></div>

  <div id="item-02"><img src="images/home-preview.png" alt="" /></div>

  <div id="item-03"><img src="images/home-preview.png" alt="" /></div>

  <div id="item-04"><img src="images/home-preview.png" alt="" /></div>

  <div id="item-05"><img src="images/home-preview.png" alt="" /></div>

  <div id="item-06"><img src="images/home-preview.png" alt="" /></div>

</span>

Answer 1

您应该考虑事件目标是单个对象，即使目标包含多个项目：$('.nav-menu-list ul li').hover(function() {&nbsp; &nbsp; var id = $(this).data().id;&nbsp;&nbsp; &nbsp; $("#"+id).fadeIn();}, function(){&nbsp; &nbsp; var id = $(this).data().id;&nbsp;&nbsp; &nbsp; $('#'+id).fadeOut();});