问题描述
我正在尝试创建一个产品卡，当您将鼠标悬停在卡上时，它将显示图像的缩略图，如果将鼠标悬停在该缩略图上，则主图像将变为缩略图的图像。我已经设法做到这一点，但是当我有其他具有类似属性的卡片（考虑到这是一个电子商务网站）时，我的挑战就来了。每当我将鼠标悬停在缩略图上时，两张卡都会做出反应，而不是我将鼠标悬停在上面。当我将鼠标悬停在特定卡片上的特定缩略图上时，如何更改该卡片的主图像？
<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");
});
});
解决方法
在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");
});
});
如果您使用jQuery，我建议您检查语法并查看jQuery的工作原理，因为存在许多无用的循环：jQuery将相同的规则应用于所有匹配的元素。
Find（）方法检索前一个元素的子元素而不会循环。 关于.active类，我先将所有对象删除该类，然后将其添加到当前对象中。
添加CSS只是为了更好地显示摘要。
$(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>