javascript - 如何使用元素数据属性最小化功能重复？

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>

标签： javascript

Answer 1

您应该考虑事件目标是单个对象，即使目标包含多个项目：

$('.nav-menu-list ul li').hover(function() {
    var id = $(this).data().id; 
    $("#"+id).fadeIn();
}, function(){
    var id = $(this).data().id; 
    $('#'+id).fadeOut();
});