如何使用元素數據屬性最小化函數重復？

Question

我的jQuery代碼正在運行，但我想通過data屬性將其最小化。 請在下面查看我的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();
});

Answer 2

您只能使用一個功能來控制所有這些功能。

但是，為此，您必須在jQuery選擇器中使用$('.nav-menu-list ul li') 。
使用此選擇器， hover()上下文將是li本身，然后，只需獲取當前懸停的li的data-id ，然后使用它來選擇要定位的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>