如何选中所有ID不匹配的元素？实现鼠标悬停切换元素显隐

修正后的完整代码 #

HTML

<nav class="nav-project">
  <div data-title="content-1">显示内容1，隐藏内容2</div>
  <div data-title="content-2">显示内容2，隐藏内容1</div>
</nav>

<div id="content-1" class="content-item">内容1</div>
<div id="content-2" class="content-item">内容2</div>

CSS

/* 默认隐藏所有内容项 */
.content-item {
  display: none;
}

/* 显示目标内容项 */
.content-item.visible {
  display: block;
}

JavaScript

// 获取导航容器
const nav = document.querySelector('.nav-project');

// 事件委托绑定鼠标进入事件，更高效
nav.addEventListener('mouseenter', function(e) {
  // 确保触发事件的是导航项
  if (e.target.dataset.title) {
    const targetId = e.target.dataset.title;
    // 获取所有内容项
    const allContentItems = document.querySelectorAll('.content-item');
    
    // 遍历切换显示状态：匹配ID的显示，其余隐藏
    allContentItems.forEach(item => {
      item.id === targetId 
        ? item.classList.add('visible') 
        : item.classList.remove('visible');
    });
  }
});

原代码问题及修改说明 #

• 选择器使用错误：document.getElementById仅支持单个ID字符串，无法识别:not()这类CSS伪类选择器。要批量选中非目标元素，需用document.querySelectorAll配合类选择器实现。
• CSS属性错误：原代码重复定义.visible类，且display: invisible是无效属性值，隐藏元素应使用display: none。改为默认隐藏所有内容项，通过添加/移除visible类切换显示状态更简洁。
• 事件绑定优化：原代码给导航容器本身绑定事件，改为事件委托后，只需给父容器绑定一次事件，就能监听内部所有导航项的交互，避免冗余绑定。
• ID规范优化：虽然浏览器支持纯数字ID，但HTML规范建议ID以字母开头，调整为content-1、content-2更符合标准。

内容的提问来源于stack exchange，提问作者Aurore