原生JS实现动态元素显示切换遇问题：索引未定义及setAttribute报错求助

问题背景 #

开发学科笔记应用时，需实现点击按钮切换动态生成的笔记列表（.toggle_div）的显示/隐藏状态。由于元素数量动态变化无法使用ID，只能通过类名操作，但遇到两个问题：

• 无法获取点击按钮在HTMLCollection中的索引，变量j始终未定义，使用indexOf方法时提示“indexOf is not a function”；
• 曾出现“setAttribute is not a function”报错。

现有代码 #

HTML模板（模板引擎循环生成） #

{% for i in range(l) %}
  <button class="t_b_show" onclick="func_show(this);"> Show this list</button>
  <div class="toggle_div" hidden="true">  
    <ul>
      <li> {{list1[i]["name"]}}</li>
      <li> {{list1[i]["note"]}}</li>
    </ul>
  </div>
  <button class="t_b_hide" hidden="true" onclick="func_hide(this);">Hide this list</button>
{% endfor %}

原JavaScript代码 #

function func_show(theButton) {
  subNoteDivs = document.getElementsByClassName('toggle_div');
  showButtons = document.getElementsByClassName('t_b_show');
  hideButtons = document.getElementsByClassName('t_b_hide');
  thisElement = theButton;
  console.log(thisElement);//shows the clicked element in the console, meaning the element itself passes to the function
  
  if(showButtons.length > 0) {
    for (let i = 0; i < showButtons.length; i++){
      if(showButtons[i] == thisElement){
        let j = i;
        i = showButtons.length;
      }
    }
  }
  console.log(j);
  subNoteDivs[j].setAttribute('hidden', false);
  hideButtons[j].setAttribute('hidden', false);
  showButtons[j].setAttribute('hidden', true);
}


function func_hide(theButton) {
  subNoteDivs = document.getElementsByClassName('toggle_div');
  showButtons = document.getElementsByClassName('t_b_show');
  hideButtons = document.getElementsByClassName('t_b_hide');
  thisElement = theButton;
  console.log(thisElement);//shows the clicked element in the console, meaning the element itself passes to the function
  if (hideButtons.length > 0){
    for (let i = 0; i < hideButtons.length; i++){
      if(hideButtons[i] == thisElement){
        let j = i;
        i = hideButtons.length;
      }
    }
  }
  console.log(j);
  subNoteDivs[j].setAttribute('hidden', true);
  hideButtons[j].setAttribute('hidden', true);
  showButtons[j].setAttribute('hidden', false);
}

问题原因分析 #

1. 变量j未定义：j在for循环的if分支内用let声明，属于局部变量，循环外部无法访问；且HTMLCollection是类数组对象，原生不支持indexOf方法，直接调用会报错。
2. setAttribute报错：当j未定义时，subNoteDivs[j]返回undefined，调用setAttribute自然触发错误；若DOM元素获取逻辑异常，也会导致该问题。

解决方案 #

方案一：修复原有索引逻辑 #

1. 将j的声明移至循环外部，确保作用域覆盖后续操作；
2. 把HTMLCollection转为数组后使用indexOf获取索引；
3. 直接操作元素的hidden属性（比setAttribute更直观高效）。

修改后的JavaScript代码：

function func_show(theButton) {
  // 将类数组转为数组，支持indexOf方法
  const showButtons = Array.from(document.getElementsByClassName('t_b_show'));
  const subNoteDivs = Array.from(document.getElementsByClassName('toggle_div'));
  const hideButtons = Array.from(document.getElementsByClassName('t_b_hide'));
  
  const j = showButtons.indexOf(theButton);
  if (j === -1) return; // 找不到目标元素直接返回，避免报错
  
  // 切换显示状态
  subNoteDivs[j].hidden = false;
  hideButtons[j].hidden = false;
  showButtons[j].hidden = true;
}

function func_hide(theButton) {
  const hideButtons = Array.from(document.getElementsByClassName('t_b_hide'));
  const subNoteDivs = Array.from(document.getElementsByClassName('toggle_div'));
  const showButtons = Array.from(document.getElementsByClassName('t_b_show'));
  
  const j = hideButtons.indexOf(theButton);
  if (j === -1) return;
  
  subNoteDivs[j].hidden = true;
  hideButtons[j].hidden = true;
  showButtons[j].hidden = false;
}

方案二：利用DOM相邻元素关系（更优） #

按钮与对应toggle_div是相邻DOM节点，直接通过nextElementSibling/previousElementSibling获取目标元素，无需依赖索引，代码更简洁且避免索引错位问题：

修改后的JavaScript代码：

function func_show(theButton) {
  // 获取当前按钮后的笔记列表容器
  const noteDiv = theButton.nextElementSibling;
  // 获取笔记列表后的隐藏按钮
  const hideBtn = noteDiv.nextElementSibling;
  
  noteDiv.hidden = false;
  hideBtn.hidden = false;
  theButton.hidden = true;
}

function func_hide(theButton) {
  // 获取当前按钮前的笔记列表容器
  const noteDiv = theButton.previousElementSibling;
  // 获取笔记列表前的显示按钮
  const showBtn = noteDiv.previousElementSibling;
  
  noteDiv.hidden = true;
  theButton.hidden = true;
  showBtn.hidden = false;
}

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