Question

我对星级评分系统有疑问。该系统不适用于我的shopApp中的每个产品。此时，我想出了如何仅针对一种产品进行设置。如果将其用于另一个div，则该效果会在第一个div上看到，但不会在该特定div上看到。我不知道如何设置它以便为每个人工作。 #HELP

我已经花了很多时间了。我尝试使用： -for循环在eventListener中，以便它适用于每个星星 -父节点 -child.Nodes -forEach（）

<div class="stars">
  <a href="#" class="star" data-star="1"></a>
  <a href="#" class="star" data-star="2"></a>
  <a href="#" class="star" data-star="3"></a>
  <a href="#" class="star" data-star="4"></a>
  <a href="#" class="star" data-star="5"></a>
</div>
<div class="stars">
  <a href="#" class="star" data-star="1"></a>
  <a href="#" class="star" data-star="2"></a>
  <a href="#" class="star" data-star="3"></a>
  <a href="#" class="star" data-star="4"></a>
  <a href="#" class="star" data-star="5"></a>
</div>
<div class="stars">
  <a href="#" class="star" data-star="1"></a>
  <a href="#" class="star" data-star="2"></a>
  <a href="#" class="star" data-star="3"></a>
  <a href="#" class="star" data-star="4"></a>
  <a href="#" class="star" data-star="5"></a>
</div>
<div class="stars">
  <a href="#" class="star" data-star="1"></a>
  <a href="#" class="star" data-star="2"></a>
  <a href="#" class="star" data-star="3"></a>
  <a href="#" class="star" data-star="4"></a>
  <a href="#" class="star" data-star="5"></a>
</div>

const stars = document.querySelectorAll('.star');
let rating = 0;
document.querySelectorAll('.stars').forEach(productRating => {
  productRating.querySelectorAll('.star').forEach(el => {
    el.addEventListener('click', e => {
      if (!e.target.matches('.star')) return;
      e.preventDefault();

      const starID = parseInt(e.target.getAttribute('data-star'));

      removeClassFromElements('is-active', stars);
      highlightStars(starID);

      rating = starID;
    });
    el.addEventListener('mouseover', e => {
      if (!e.target.matches('.star')) return;

      removeClassFromElements('is-active', stars);
      const starID = parseInt(e.target.getAttribute('data-star'));
      highlightStars(starID);
    });
    el.addEventListener('mouseleave', e => {
      removeClassFromElements('is-active', stars);
      if (rating === 0) return;
      highlightStars(rating);
    });
  });
});

function highlightStars (starID) {
  for (let i = 0; i < starID; i++) {
    stars[i].classList.add('is-active');
  }
}

function removeClassFromElements (className, elements) {
  for (let i = 0; i < elements.length; i++) {
    elements[i].classList.remove(className);
  }
}

我想为每个div分别设置星级评分系统。

Answer 1

您对highlightStars(starID)的呼叫不包含单击哪个产品，因此该功能将无法分配正确数量的活动星星。

您可以使用parentElement获取div，然后在该div上循环遍历所有子级以应用is-active。

当前highlightStars引用了一个不存在的stars变量，因此您必须考虑每个函数可以访问的内容。

如何为每个产品实施星级评分系统

1 个答案: