如何用按钮/复选框实现多DIV显示隐藏？多语言翻译行控制需求

我懂你遇到的困扰了——照着示例写了切换功能，结果只有第一个翻译区块能正常显示/隐藏，后面的完全没反应。这问题出在**id选择器的唯一性**上：document.getElementById()只会返回页面中第一个匹配该id的元素，所以后续的翻译块根本没被选中到。

咱们换用类选择器来区分不同语言的翻译内容，再给按钮绑定对应的事件，就能实现单个按钮控制多行对应翻译的切换了。下面是完整的实现方案：

实现思路 #

1. 给每种语言的翻译内容添加专属类名（比如西班牙语用spanish-trans，德语用german-trans）
2. 按钮点击时，获取所有对应类名的元素，逐个切换它们的display属性
3. 英文文本保持默认可见，不需要添加控制类

完整代码示例 #

HTML 结构 #

<!-- 英文行 + 对应翻译 -->
<div class="sentence-group">
  <p class="english-text">How are you</p>
  <p class="spanish-trans">cómo estás</p>
  <p class="german-trans">wie gehts</p>
</div>

<div class="sentence-group">
  <p class="english-text">I am fine</p>
  <p class="spanish-trans">Estoy bien</p>
  <p class="german-trans">ich bin ok</p>
</div>

<div class="sentence-group">
  <p class="english-text">What's your name?</p>
  <p class="spanish-trans">¿Cuál es tu nombre?</p>
  <p class="german-trans">Wie heißt du?</p>
</div>

<!-- 控制按钮 -->
<button onclick="toggleTranslation('spanish-trans')">切换西班牙语翻译</button>
<button onclick="toggleTranslation('german-trans')">切换德语翻译</button>

CSS 样式 #

/* 默认隐藏翻译内容 */
.spanish-trans, .german-trans {
  display: none;
  margin-left: 20px; /* 缩进区分英文和翻译 */
  color: #666;
}

/* 英文文本保持可见 */
.english-text {
  font-weight: bold;
  margin: 10px 0;
}

.sentence-group {
  margin-bottom: 15px;
}

JavaScript 逻辑 #

function toggleTranslation(className) {
  // 获取所有对应类名的翻译元素
  const translations = document.querySelectorAll(`.${className}`);
  
  // 遍历每个元素，切换显示/隐藏状态
  translations.forEach(trans => {
    if (trans.style.display === "none" || trans.style.display === "") {
      trans.style.display = "block";
    } else {
      trans.style.display = "none";
    }
  });
}

关键说明 #

• 用document.querySelectorAll()替代getElementById()：它会返回所有匹配类名的元素集合，然后我们用forEach遍历每个元素来切换状态
• 初始隐藏翻译内容：通过CSS默认设置display: none，第一次点击按钮时会切换为显示
• 按钮的onclick事件传入对应的类名，让同一个函数可以复用控制不同语言的翻译

这样修改后，点击“切换西班牙语翻译”按钮，所有西班牙语的翻译行都会一起显示/隐藏，德语按钮同理，完全符合你的需求！

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