How to minimize function repetition using element data-attribute?

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>

Leave a Reply

Your email address will not be published. Required fields are marked *