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>

Answer 1

您可以只使用一个函数来控制所有这些。

但是，为此，您必须在 jQuery 选择器中使用 $('.nav-menu-list ul li')。
使用此选择器，hover() 上下文将是 li 本身，然后，只需获取当前悬停的 的 data-id li 然后用它来选择你想要定位的 div。

见下文，我建议在代码段上使用整页(“展开代码段”)模式以更好地可视化:

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

.nav-menu-list-details div{
  display:none;
}

<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="" />ITEM_1</div>
    <div id="item-02"><img src="images/home-preview.png" alt="" />ITEM_2</div>
    <div id="item-03"><img src="images/home-preview.png" alt="" />ITEM_3</div>
    <div id="item-04"><img src="images/home-preview.png" alt="" />ITEM_4</div>
    <div id="item-05"><img src="images/home-preview.png" alt="" />ITEM_5</div>
    <div id="item-06"><img src="images/home-preview.png" alt="" />ITEM_6</div>
</span>