javascript - 使用过滤器从数组中删除悬停项目

Question

我想向数组中的每个元素添加一个 .inactive 类，不包括触发 mouseover 事件的元素。我想使用 filter 函数来执行此操作，但是，我不确定如何从 items< 数组中“过滤”悬停的 .item/。目前，所有items都添加了.inactive类

const items = document.querySelectorAll('.item');

[...items].forEach(link => {
    link.addEventListener('mouseover', function() {
        console.log(link)
        const inactives = [...items].filter(item => link)
        inactives.forEach(inactive => {
            inactive.classList.add('inactive')
        });
    });
    link.addEventListener('mouseout', function() {
        [...items].forEach(item => {
            item.classList.remove('inactive')
        });
    });
});

.item.inactive {
  opacity: 0.5;
}

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>

Answer 1

您必须通过与当前链接进行比较来修改过滤器:

const inactives = [...items].filter(item => item !== link)

我还会将 inactive 类添加到所有链接以开始。

为简化起见，您只需将 inactive 类添加到 mouseout 上的所有项目，并在 mouseover 上的悬停项目上将其删除。这样，您就不需要过滤链接。

const items = document.querySelectorAll('.item');

[...items].forEach(link => {
    link.classList.add('inactive');

    link.addEventListener('mouseover', function() {
        link.classList.remove('inactive');
    });

    link.addEventListener('mouseout', function() {
        [...items].forEach(item => {
            item.classList.add('inactive');
        });
    });
});

.item.inactive {
  opacity: 0.5;
}

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>