悬停时更改 div 中的本地图像答案

【问题标题】：Change local image in div on hover悬停时更改 div 中的本地图像
【发布时间】：2020-08-21 15:15:00
【问题描述】：

我正在尝试创建一个产品卡片，当您将鼠标悬停在卡片上时，它将显示图像的缩略图，如果您将鼠标悬停在缩略图上，主图像将变为缩略图的图像。我已经设法完成了这项工作，但是当我拥有其他具有相似属性的卡片时（考虑到它是一个电子商务网站），我的挑战就来了。每当我将鼠标悬停在缩略图上时，两张卡片都会做出反应，而不是我悬停的卡片。当我将鼠标悬停在特定卡片中的特定缩略图上时，我如何才能让它只更改该卡片的主图像？

HTML 代码

<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 代码

/* 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");
    });
});

【问题讨论】：

是的，我正在使用 boostrap 和 jquery
mainImg.forEach(function(image) { image.src = thumb.children[0].src;}); 好吧，你确实设置了所有图像。（一目了然）
我怎样才能只为特定图像设置？

标签： javascript html jquery twitter-bootstrap

【解决方案1】：

如果你使用 jQuery，我建议你检查一下语法，看看 jQuery 是如何工作的，因为有很多无用的循环：jQuery 对所有匹配的元素应用相同的规则。

Find() 方法在不循环的情况下检索前一个元素的子元素。关于 .active 类，我首先将类删除到所有对象，然后将其添加到当前。

添加 CSS 只是为了更好地显示 sn-p。

$(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>

【讨论】：

谢谢。这已经成功了。我意识到，当我运行代码时，它给了我 thumbs.on 不是函数错误。所以我必须把它包装在 $() 中才能工作。

【解决方案2】：

在 mouseover 函数中，您正在循环 DOM 的所有 .main-img。您应该将其视为一棵树并选择当前项目的兄弟姐妹 .main-img。

在我的示例中，我将变量的声明移到了循环中并

使用$(this) 指代最初请求的元素；
使用.siblings() 仅匹配当前产品的商品。

/* 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");
    });
});

【讨论】：

这给了我一个未捕获的类型错误，即无法读取未定义的属性长度