0

I am trying to create a product card where, when you hover over the card, it will show thumbnails of images that if you hover on the thumbnail, the main image changes to the image of the thumbnail. I have managed to get this done but my challenge now comes in when I have other cards with similar attributes (considering that it is an e-commerce site). Whenever I hover over a thumbnail, both cards react instead of the card I am hovering over. How can I have it that when I hover over a specific thumbnail, in a specific card, it only changes the main image of that card?

HTML code

<div class="display-area">
                <div class="row">
                    <div class="col-lg-2 col-md-2">
                        <a href="">
                            <div class="product">
                                <div class="image-area">
                                    <button class="fav"><i class="far fa-heart"></i></button>
                                    <button class="quick-view"><span>Quick View</span><i class="fa fa-eye"
                                            aria-hidden="true"></i>
                                    </button>
                                    <button class="compare"><i class="fas fa-balance-scale"></i></button>
                                    <img src="./assets/images/ladies.jpg" alt="" class="main-img">
                                    <div class="img-thumb thumb-1 active">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-2">
                                        <img src="./assets/images/men.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-3">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                </div>
                                <div class="details">
                                    <div class="ratings">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <div class="shop">
                                        The DMs
                                    </div>
                                    <div class="product-name">
                                        Oversized Cottom Blouse
                                    </div>
                                    <div class="price">
                                        P 250.00
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <a href="">
                            <div class="product">
                                <span class="new-tag">New</span>
                                <div class="image-area">
                                    <button class="fav"><i class="far fa-heart"></i></button>
                                    <button class="quick-view"><span>Quick View</span><i class="fa fa-eye"
                                            aria-hidden="true"></i>
                                    </button>
                                    <button class="compare"><i class="fas fa-balance-scale"></i></button>
                                    <img src="./assets/images/ladies.jpg" alt="" class="main-img">
                                    <div class="img-thumb thumb-1 active">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-2">
                                        <img src="./assets/images/men.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-3">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                </div>
                                <div class="details">
                                    <div class="ratings">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <div class="shop">
                                        The DMs
                                    </div>
                                    <div class="product-name">
                                        Oversized Cottom Blouse
                                    </div>
                                    <div class="price">
                                        P 250.00
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

JS code

/* product hover */
const thumbs = document.querySelectorAll('.img-thumb');
const mainImg = document.querySelectorAll('.main-img');

thumbs.forEach(function(thumb) {
    thumb.addEventListener('mouseover', function() {
        for (let img = 0; img < mainImg.length; img++) {
            mainImg.forEach(function(image) {
                image.src = thumb.children[0].src;
            });
        }
        for (let i = 0; i < thumbs.length; i++) {
            thumbs[i].classList.remove("active");
        }
        thumb.classList.add("active");
    });
});
hgb123
  • 13,869
  • 3
  • 20
  • 38
Providence Moyo
  • 97
  • 1
  • 8

2 Answers2

1

Inside the mouseover function you are looping in all .main-img of the DOM. You should think about it like a tree and select the siblings .main-img of current item.

In my example I moved the declaration of the variable inside the loop and

  • used $(this) to refer to the element that was originally requested;
  • used .siblings() to match only the item of the current product.
/* product hover */
const thumbs = document.querySelectorAll('.img-thumb');

thumbs.forEach(function(thumb) {
    thumb.addEventListener('mouseover', function() {
        for (let img = 0; img < mainImg.length; img++) {
            var mainImg = $(this).siblings('.main-img');
            mainImg.forEach(function(image) {
                image.src = thumb.children[0].src;
            });
        }
        for (let i = 0; i < thumbs.length; i++) {
            thumbs[i].classList.remove("active");
        }
        thumb.classList.add("active");
    });
});
alula
  • 101
  • 4
1

If you use jQuery I would suggest to check you syntax and see how jQuery works as there are a lot of useless loops: jQuery applies the same rule to all matched elements.

Find() method retrieves the child of the prior element without looping. Regarding the .active class first I remove the class to all objects then I add it just to current.

Css has been added just to show better the snippet.

$(document).ready(function () {
      /* product hover */
      const thumbs = $('.img-thumb');

      thumbs.on('mouseover', function () {
        var mainImg = $(this).siblings('.main-img');
        var current_img = $(this).find('img').attr('src');
        mainImg.attr('src', current_img);
        $('.img-thumb').removeClass("active");
        $(this).addClass("active");
      });
    });
.col-lg-2 {
  width: 30%;
}
.row {
display: flex;
}
.active {
  border: 3px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-area">
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <a href="">
          <div class="product">
            <div class="image-area">
              <button class="fav"><i class="far fa-heart"></i></button>
              <button class="quick-view"><span>Quick View</span><i class="fa fa-eye" aria-hidden="true"></i>
              </button>
              <button class="compare"><i class="fas fa-balance-scale"></i></button>
              <img src="https://via.placeholder.com/80x40/ffff00/?text=image%20main" alt="" class="main-img">
              <div class="img-thumb thumb-1 active">
                <img src="https://via.placeholder.com/80x40/0000FF/?text=thumb-1" alt="">
              </div>
              <div class="img-thumb thumb-2">
                <img src="https://via.placeholder.com/80x40/FF0000/?text=thumb-2" alt="">
              </div>
              <div class="img-thumb thumb-3">
                <img src="https://via.placeholder.com/80x40/00ff00/?text=thumb-3" alt="">
              </div>
            </div>
            <div class="details">
              <div class="ratings">
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
              </div>
              <div class="shop">
                The DMs
              </div>
              <div class="product-name">
                Oversized Cottom Blouse
              </div>
              <div class="price">
                P 250.00
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="col-lg-2 col-md-2">
        <a href="">
          <div class="product">
            <span class="new-tag">New</span>
            <div class="image-area">
              <button class="fav"><i class="far fa-heart"></i></button>
              <button class="quick-view"><span>Quick View</span><i class="fa fa-eye" aria-hidden="true"></i>
              </button>
              <button class="compare"><i class="fas fa-balance-scale"></i></button>
              <img src="https://via.placeholder.com/80x40/ffff00/?text=image%20main" alt="" class="main-img">
              <div class="img-thumb thumb-1 active">
                <img src="https://via.placeholder.com/80x40/0000FF/?text=thumb-1" alt="">
              </div>
              <div class="img-thumb thumb-2">
                <img src="https://via.placeholder.com/80x40/FF0000/?text=thumb-2" alt="">
              </div>
              <div class="img-thumb thumb-3">
                <img src="https://via.placeholder.com/80x40/00ff00/?text=thumb-3" alt="">
              </div>
            </div>
            <div class="details">
              <div class="ratings">
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
              </div>
              <div class="shop">
                The DMs
              </div>
              <div class="product-name">
                Oversized Cottom Blouse
              </div>
              <div class="price">
                P 250.00
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
halfer
  • 19,824
  • 17
  • 99
  • 186
alula
  • 101
  • 4
  • Thank you. This has managed to work. I realized though that when I ran the code, it gave me the thumbs.on is not a function error. So I had to wrap it in $() for it to work. – Providence Moyo Aug 22 '20 at 17:45