本文介绍如何用纯 JavaScript 实现：点击单选按钮时，仅显示对应 ID 的元素（opacity=1），同时隐藏所有其他具有相同 class 的兄弟元素（opacity=0），重点解决 :not() 伪类中动态排除 ID 的语法问题。
本文介绍如何用纯 javascript 实现：点击单选按钮时，仅显示对应 id 的元素（opacity=1），同时隐藏所有其他具有相同 class 的兄弟元素（opacity=0），重点解决 `:not()` 伪类中动态排除 id 的语法问题。
在前端交互开发中，常需根据用户选择动态切换多个同类容器的可见性。本例中，四个 <div> 共享 class <code>my-divs，每个拥有唯一 ID（如 div-one）；四组单选按钮（<input type="radio">）通过 value 属性关联对应 div ID。目标是：选中某 radio 时，仅该 ID 对应的 div 显示（opacity=1），其余同 class 元素全部隐藏（opacity=0）。
关键难点在于：JavaScript 中 querySelectorAll() 的 :not() 伪类不支持直接插入变量（如 .my-divs:not(divId) 会报错），必须将变量拼接到合法 CSS 选择器中。正确做法是使用属性选择器 :not([id="xxx"])，并借助字符串拼接或模板字面量动态注入 ID 值。
以下是完整、可运行的解决方案（已修复原始代码中的多处问题）：
<meta charset="UTF-8"><title>Radio-Controlled Div Visibility</title><!-- 四个同 class、不同 id 的 div --><div id="div-one" class="my-divs">内容一</div>
<div id="div-two" class="my-divs">内容二</div>
<div id="div-three" class="my-divs">内容三</div>
<div id="div-four" class="my-divs">内容四</div>
<!-- 单选按钮组：注意 id 必须唯一（原代码中重复使用 "radio-one" 已修正） -->
<label><input type="radio" id="radio-one" name="div-radio" value="div-one" onclick="showOnly(this.value)"> 选项一</label><br><label><input type="radio" id="radio-two" name="div-radio" value="div-two" onclick="showOnly(this.value)"> 选项二</label><br><label><input type="radio" id="radio-three" name="div-radio" value="div-three" onclick="showOnly(this.value)"> 选项三</label><br><label><input type="radio" id="radio-four" name="div-radio" value="div-four" onclick="showOnly(this.value)"> 选项四</label>
<script>
function showOnly(targetId) {
// 1. 将所有 .my-divs 的 opacity 设为 0（隐藏）
document.querySelectorAll('.my-divs').forEach(el => {
el.style.opacity = '0';
});
// 2. 单独将目标元素 opacity 设为 1（显示）
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.style.opacity = '1';
}
}
// ✅ 更优写法（推荐）：使用 :not([id="xxx"]) 一次性筛选
// function showOnly(targetId) {
// // 隐藏所有同 class 元素，但排除目标 ID
// document.querySelectorAll('.my-divs:not([id="' + targetId + '"])').forEach(el => {
// el.style.opacity = '0';
// });
// // 确保目标元素显示
// document.getElementById(targetId).style.opacity = '1';
// }
</script>
? 注意事项与优化建议：
-
ID 唯一性：原始代码中所有 radio 的
id="radio-one"违反 HTML 规范，已修正为radio-one/radio-two等唯一 ID； -
语义化增强：为 radio 添加
<label></label>包裹，提升可访问性与点击区域； -
健壮性处理：添加
if (targetEl)判断，避免因传入无效 ID 导致脚本错误； -
性能考量：上述“先全隐再单显”方式逻辑清晰、兼容性极佳（支持所有现代浏览器及 IE9+）；若偏好单次查询，可采用注释中的
:not([id="..."])写法，但需注意引号嵌套（双引号内用单引号包裹值）； -
进阶提示：如需真正“隐藏”（而非仅透明），可改用
display: none/block或visibility: hidden/visible，但需注意opacity: 0仍保留布局空间且支持 CSS 过渡动画。
此方案完全基于原生 JavaScript，无需任何外部依赖，结构清晰、易于维护，是实现同类元素条件显隐的经典实践。
