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

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() {

    var id = $(this).data().id; 

    $("#"+id).fadeIn();

}, function(){

    var id = $(this).data().id; 

    $('#'+id).fadeOut();

});