JavaScript中querySelector多条件设置及内容显示问题求助

你之前用querySelector("#result_${i}, #text_${i}")无效的核心原因是：querySelector只会返回匹配选择器的第一个元素，所以只会选中#result_${i}，#text_${i}完全没被处理。要同时控制多个元素，有两种直接可行的方法：

方法1：用querySelectorAll遍历处理 #

修改toggle函数，用querySelectorAll选中当前索引对应的所有目标元素，再循环切换它们的显示状态：

function toggle(i) {
  // 选中当前i对应的result和text元素
  const elements = document.querySelectorAll(`#result_${i}, #text_${i}`);
  // 遍历每个元素切换显示/隐藏
  elements.forEach(el => {
    el.style.display = el.style.display !== "none" ? "none" : "block";
  });
}

方法2：分别获取两个元素单独处理 #

如果目标元素数量固定且少，也可以直接分别获取两个元素，同步切换它们的状态：

function toggle(i) {
  const resultDiv = document.querySelector(`#result_${i}`);
  const textDiv = document.querySelector(`#text_${i}`);
  
  const shouldHide = resultDiv.style.display !== "none";
  resultDiv.style.display = shouldHide ? "none" : "block";
  textDiv.style.display = shouldHide ? "none" : "block";
}

两种方法都能实现点击按钮时，同时控制result和text元素的显示与隐藏。

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