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>