Question

我想为某些项目创建一个过滤器。当用户选择标签时，将记录相关项目。

我相信由于[data-tags]项之间的空格，以下内容无法正常工作。我无法更改此设置，因此过滤器必须对此具有弹性。我该怎么办？

function filterTag() {
    const tags = Array.from(document.querySelectorAll('.filter-tags li'));

    tags.forEach((tag) => {
        tag.addEventListener("click", function() {
            const selectedTag = this.dataset.tag
            const relatedProjects = Array.from(document.querySelectorAll(`[data-tags=${selectedTag}]`));

            console.log(relatedProjects)
        })
    })
}

filterTag();

.filter-tags li {
  cursor: pointer;
}

div[data-tags] {
  border: 1px solid black;
  margin: 0.3em;
}

<ul class="filter-tags">
  <li data-tag="industrial">Industrial</li>
  <li data-tag="commercial">Commercial</li>
  <li data-tag="pavillion">Pavillion</li>
</ul>

<div data-tags="industrial commercial pavillion ">Project 1</div>
<div data-tags="industrial commercial pavillion ">Project 2</div>
<div data-tags="commercial ">Project 3</div>
<div data-tags="industrial ">Project 4</div>
<div data-tags="pavillion ">Project 5</div>

Answer 1

由于属性的值是用空格分隔的列表，因此可以使用[data-tags~=${selectedTag}]选择器：

const relatedProjects = Array.from(document.querySelectorAll(`[data-tags~=${selectedTag}]`));

可能的选择器列表在CSSWG Selectors Overview中。

有一个related question for comma-separated lists，尽管其他人建议只使用空格分隔的列表代替。

检查元素是否包含特定的数据集项

1 个答案: