How to minimize function repetition using element data-attribute?

Question

My jQuery code is working but I want to minimal it by data attribute. Please see below my HTML and jQuery code.

The functions below are repeated upto four times and I want to minimize/reduce this repetition. Thanks in advance.

 $('.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

You should consider that the event target is the single object, even if the target includes a multitude of items:

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

Answer 2

You can use only a single function to control all of them.

But, for this, in the jQuery selector you must use $('.nav-menu-list ul li') .
With this selector, hover() context will be the li itself, then, just get the data-id of the current hovered li and then use it to select the div you want to target.

See below, I suggest to use full page ("Expand Snippet") mode on the snippet to better visualization:

 $('.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>