JS-将活动类添加到与悬停元素具有相同数据属性的元素中

Question

我想实现与本页部分类似的效果"适合每个人的东西"。在悬停在任何"；链接"；元素；产品"；具有相同"；数据产品"；值应该得到"；活动的"；班我需要在纯JS中实现它(没有jQuery(。我做了几次尝试，但都没有成功。你知道有什么可以帮助我的例子吗？

<div class="product-links">
<a class="link" data-product="1" href="/url/"></a>
<a class="link" data-product="2" href="/url/"></a>
<a class="link" data-product="3" href="/url/"></a>
<a class="link" data-product="4" href="/url/"></a>
</div>
<div class="screenshot-container">
<div class="product" data-product="1"><img src="image.jgp"></div>
<div class="product" data-product="2"><img src="image.jgp"></div>
<div class="product" data-product="3"><img src="image.jgp"></div>
<div class="product" data-product="4"><img src="image.jgp"></div>
</div>

Answer 1

这里有一种潜在的方法，它使用mouseover事件和一些事件冒泡将active类添加到当前悬停的任何链接。

const linkContainer = document.querySelector(".product-links");
linkContainer.addEventListener("mouseover", function(e) {
if (e.target.className !== "link") return;
const productId = e.target.dataset.product;
selectActive(productId);
});
linkContainer.addEventListener("mouseout", function(e) {
if (e.target.className !== "link") return;
selectActive();
});
function selectActive(productId) {
const allProducts = document.querySelectorAll(".product");
for (let product of allProducts) {
if (product.dataset.product === productId) {
product.classList.add("active");
} else {
product.classList.remove("active");
}
}
}

.active {
background-color: #FF0;
}

<div class="product-links">
<a class="link" data-product="1" href="/url/">1</a>
<a class="link" data-product="2" href="/url/">2</a>
<a class="link" data-product="3" href="/url/">3</a>
<a class="link" data-product="4" href="/url/">4</a>
</div>
<div class="screenshot-container">
<div class="product" data-product="1">1</div>
<div class="product" data-product="2">2</div>
<div class="product" data-product="3">3</div>
<div class="product" data-product="4">4</div>
</div>