时间戳

首页 > 解决方案 > 使用过滤器从数组中删除悬停的项目

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

问题描述

我想为.inactive数组中的每个元素添加一个类，不包括mouseover触发事件的元素。我想用这个filter函数来做这个，但是，我不确定如何.item从items. 目前，所有人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>

标签： javascriptarrays

解决方案

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

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>

推荐阅读