如何识别被点击的span，切换其内部图标CSS显示状态并实现互斥？

嘿，我来帮你实现这个点击色块切换显示图标的需求！咱们可以用简单的JavaScript结合DOM操作来搞定，保证同一时间只显示一个图标，下面是具体的实现方案：

1. 给每个色块绑定点击事件
2. 点击时先隐藏所有图标（或者移除所有图标的显示类）
3. 再显示当前点击色块内的图标（给当前图标添加显示类）

HTML结构 #

先搭好你的色块和图标嵌套结构：

<!-- 可以根据需求修改色块的样式和图标内容 -->
<span class="color-block">
  <span class="icon">✅</span>
</span>
<span class="color-block">
  <span class="icon">✅</span>
</span>
<span class="color-block">
  <span class="icon">✅</span>
</span>

CSS样式 #

初始让图标隐藏，给色块加基础样式提升交互感：

.color-block {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 0 10px;
  background-color: #e0e0e0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.color-block:hover {
  background-color: #bdbdbd;
}

.icon {
  display: none;
  font-size: 40px;
  line-height: 80px;
  text-align: center;
  width: 100%;
}

/* 用类控制显示，比直接操作style更灵活易维护 */
.icon.active {
  display: block;
}

JavaScript逻辑 #

实现点击切换的核心功能：

// 获取所有色块元素
const colorBlocks = document.querySelectorAll('.color-block');

// 给每个色块绑定点击事件
colorBlocks.forEach(block => {
  block.addEventListener('click', () => {
    // 第一步：移除所有图标的active类，统一隐藏
    document.querySelectorAll('.icon').forEach(icon => {
      icon.classList.remove('active');
    });
    // 第二步：给当前色块内的图标添加active类，显示它
    const currentIcon = block.querySelector('.icon');
    currentIcon.classList.add('active');
  });
});

• 用classList操作类名来控制显示/隐藏，比直接修改style.display更符合样式与逻辑分离的原则，后续改样式只需要调整CSS即可
• 点击时先统一隐藏所有图标，再显示当前的，确保永远只有一个图标处于显示状态
• 如果需要默认显示第一个图标，只需要在页面加载时给第一个图标手动添加active类就行

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