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
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>