如何选择所有没有匹配 ID 的项目？答案

【问题标题】：How can I select all items that don't have the matching ID?如何选择所有没有匹配 ID 的项目？
【发布时间】：2022-09-30 22:36:49
【问题描述】：

我希望能够根据它是否匹配 ID 来选择所有不匹配的元素。

不过，也许还有其他完整的方法可以做到这一点。

let menus = document.getElementsByClassName(\"nav-project\");

Array.from(menus).forEach(function(menu) {
    menu.addEventListener(\"mouseenter\", function(e) {

   const visible = document.getElementById(e.target.dataset.title)
// const invisible = document.getElementById(\":not(#\" + e.target.dataset.title+ \")\")
//    visible.classList.add(\"visible\");
//    invisible.classList.add(\"invisible\");
   console.log(visible)
   console.log(invisible)

    });
});

为什么不选择身份证？只能有一个。
所以你想让匹配 id 和 title 的元素可见而另一个不可见？
请使用编辑器在 sn-p 演示中添加一些具有代表性的 HTML。
此外，querySelectorAll() 消除了对Array.from() 的需求。

标签： javascript

【解决方案1】：

如果您想在使用鼠标进入菜单时使每个菜单中的元素与匹配的 id 和标题可见而另一个不可见，那么您可以尝试：

document.querySelectorAll(".nav-project").forEach(menu => {
    menu.addEventListener("mouseenter", event => {
        event.target.children.forEach(child => {
            if (child.id === menu.dataset.title) child.classList.add("visible");
            else child.classList.add("invisible");
        });
    });
});

【讨论】：