JS multiple class same function

Question

I use js to load big image whent hover to list thumbnail ok. but don't work to multiple.

How to: hover .thumbs .item of boximg_01 or boximg_02 .... loading only image in boximg_1 or boximg_02 width one js function. multiple boximg_* loading img only of element.

Now when hover thumbs img of boximg_01 it run 2 big img on both boximg_01 & boximg_02

 $(document).ready(function() { $(".box-image .thumbs img").hover(function() { var imgpath = $(this).attr("dir"); $(".box-image .image").html("<img src=" + imgpath + ">"); }); });

 #image { max-width: 348px; margin: 0 auto; float: left; background: red; } #thumbs, .thumbs { width: 100%; margin: 0 auto; display: flex; float: left; } .thumbs .item {width: 100px; height: 100px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boximg_01 box-image"> <div id="image" class="image"> <a data-fancybox="gallery" href="#"> <img src="https://picsum.photos/id/1/400/400"> </a> </div> <div class="thumbs"> <div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div> <div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boximg_02 box-image"> <div id="image" class="image"> <a data-fancybox="gallery" href="#"> <img src="https://picsum.photos/id/3/400/400"> </a> </div> <div class="thumbs"> <div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div> <div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div> </div> </div>

Answer 1

Use DOM navigation relative to this to find the related image.

 $(document).ready(function() { $(".box-image .thumbs img").hover(function() { var imgpath = $(this).attr("dir"); $(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">"); }); });

 #image { max-width: 348px; margin: 0 auto; float: left; background: red; } #thumbs, .thumbs { width: 100%; margin: 0 auto; display: flex; float: left; } .thumbs .item {width: 100px; height: 100px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boximg_01 box-image"> <div id="image" class="image"> <a data-fancybox="gallery" href="#"> <img src="https://picsum.photos/id/1/400/400"> </a> </div> <div class="thumbs"> <div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div> <div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="boximg_02 box-image"> <div id="image" class="image"> <a data-fancybox="gallery" href="#"> <img src="https://picsum.photos/id/3/400/400"> </a> </div> <div class="thumbs"> <div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div> <div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div> </div> </div>