如何切换相同类名的FontA.图标及查询元素隐藏的其他方法

你遇到的问题根源是两个切换目标图标类名完全一致，用类选择器操作时会同时命中两个元素，自然无法实现单个控制显隐的效果，可选用以下两种方案解决：

• 给两个图标分别新增专属标识类，比如icon-unchecked和icon-checked，再配套对应的CSS规则即可：

/* 默认展示未选中态，隐藏选中态 */
.icon-checked {
  display: none;
}
/* 激活时切换显隐状态 */
.active .icon-unchecked {
  display: none;
}
.active .icon-checked {
  display: inline-block;
}

• 更精简的方案是仅保留单个图标元素，不需要提前写两个图标，直接通过JS动态修改图标对应的类名实现切换，比如切换心形空心/实心样式时，只需要切换fa-regular和fa-solid两个类即可，不需要额外写显隐逻辑。

你之前遇到的隐藏后仍有空白的问题，是不同隐藏属性对元素盒模型的处理逻辑不同导致的，常见的隐藏方式和差异如下：

• opacity: 0：元素仅变为完全透明，仍占据原有布局空间，可正常响应点击等交互事件
• visibility: hidden：元素视觉上完全隐藏，仍占据原有布局空间，不会响应任何交互事件
• display: none：元素直接从页面渲染树中移除，完全不占据布局空间，也不会响应交互，就是你现在在用的方案
  除此之外还有几种适用特殊场景的隐藏方式：
• 绝对定位移出视口：设置position: absolute; left: -9999px; top: -9999px;，元素不影响当前页面布局，同时可被屏幕阅读器识别，适合无障碍优化场景
• clip-path: inset(100%)：将元素完全裁剪不可见，元素仍占据原有布局空间，适合搭配过渡动画做显隐效果
• content-visibility: hidden：Chromium内核支持的新属性，隐藏元素时会跳过其内部内容的渲染过程，性能表现更好，默认仍占据原有布局空间，搭配contain-intrinsic-size: 0使用可实现和display: none一致的不占空间效果。

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