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>

Use $(this) and DOM navigation methods to refer to elements in the same DIV. — Barmar
– Barmar, Commented Jul 25, 2021 at 10:51
@Barmar can you help me a example run code snippet. JS not a my strength... — DinhCode
– DinhCode, Commented Jul 25, 2021 at 10:53

Barmar · Accepted Answer · 2021-07-25 11:01:32Z

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>

answered Jul 25, 2021 at 11:01

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bergi Over a year ago

Btw, better use .empty().append($("<img>", {src: imgpath})) instead of .html to be safe against XSS if the filepath is dynamic.

Barmar Over a year ago

I would really use .find(".image img").attr("src", imgpath")

Bergi Over a year ago

Oh, right, the img element already exists - and also that wouldn't destroy the fancybox gallery wrapper.

Collectives™ on Stack Overflow

JS multiple class same function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related