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

Question

我想达到一个类似的效果，在this page部分“为每个人的东西”。在将鼠标悬停在任何"link“元素上之后，具有相同"data-product”值的"product“元素应该获得"active”类。我需要在纯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>

​