javascript - 如何用纯 javaScript 替换 .prevAll() 和 .addBack()

Question

我在 jQuery 中有这个函数:

$(document).on('mouseover', '.star', function () {
  $(this).prevAll().addBack().addClass('full');
});

$(document).on('mouseout', '.star', function () {
  $(this).removeClass('full');
});

我想用原生 javaScript 创建类似的函数。内容是动态呈现的。

如何在 mouseover 和 mouseout 上定位同级元素，如何从所有元素中仅删除一个元素(即被单击的元素)中的类。

这是我尝试过的:

document.addEventListener("mouseout", function(e) {
  for (var target = e.target; target && target != this; target = target.parentNode) {
    if (target.matches('.star')) {
      target.classList.remove('full');
    }
  }
}, false);

document.addEventListener("mouseover", function(e) {
  for (var target = e.target; target && target != this; target = target.parentNode) {
    if (target.matches('.star')) {
      target.classList.add('full');
      // This one removes the class for ALL .star elements.
    }
  }
}, false);

HTML:

<div data-vote="1" class="star">Star</div>
<div data-vote="2" class="star">Star</div>
<div data-vote="3" class="star">Star</div>
<div data-vote="4" class="star">Star</div>
<div data-vote="5" class="star">Star</div>

Jsfiddle with what I have tried .

Jsfiddle with jQuery - 现有解决方案 - 我正在尝试将其复制到 native JavaScript 中。

Answer 1

您可以尝试这种方法:

document.addEventListener("mouseout", function({ target }) {
    if (target.matches('.star')) {
      target.classList.remove('full');
    }
}, false);

document.addEventListener("mouseover", function({ target }) {
    if (target.matches('.star')) {
      addClassToPrevSiblings(target, 'full');
    }
}, false);

function addClassToPrevSiblings(elem, classToAdd) {
  while (elem) {
    if (elem.nodeType === 1) {
      elem.classList.add(classToAdd);
    }
    elem = elem.previousSibling;
  }
}

对于这两个事件，我只是检查它们的目标是否是星元素。当它是一个 mouseout 事件时，我循环遍历 previous siblings和元素本身添加 full 类。

Here是 jsFiddle 上的工作示例。