循环渲染中按钮仅控制首个div显示切换的问题及解决咨询

是的，你的问题**完全是因为循环生成了多个重复的id="toggle_display"**导致的。浏览器中document.getElementById()只会返回匹配该id的第一个元素，所以所有按钮点击后都会操作第一个div，其他div根本不会被选中。

下面给你几种可行的解决方法：

方法1：生成唯一ID绑定对应元素 #

利用循环的索引或数据的唯一标识，给每个div生成独一无二的ID，点击时把ID传给toggle函数：

修改后的模板代码 #

<div class="profile">
 {% for i in profile %}
 <div class="profile-item">
  <button onclick="toggle('toggle_display_{{ loop.index }}')">Show Form</button>
  ...
  <div class="form" id="toggle_display_{{ loop.index }}">
   <form method="POST" enctype="multipart/form-data">
       <input type="text" name="username">
       <button class="uploadPost" type="submit">submit</button>
   </form>
  </div>
 </div>
 {% endfor %}
</div>

修改后的JS代码 #

function toggle(targetId) {
  var x = document.getElementById(targetId);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

方法2：利用DOM元素关系（无需ID） #

不需要依赖ID，通过按钮的DOM位置直接找到对应的兄弟div，这种方法更灵活，避免ID管理的麻烦：

修改后的模板代码 #

<div class="profile">
 {% for i in profile %}
 <div class="profile-item">
  <button onclick="toggle(this)">Show Form</button>
  ...
  <div class="form">
   <form method="POST" enctype="multipart/form-data">
       <input type="text" name="username">
       <button class="uploadPost" type="submit">submit</button>
   </form>
  </div>
 </div>
 {% endfor %}
</div>

修改后的JS代码 #

function toggle(button) {
  // 找到当前按钮所在容器里的.form元素
  var x = button.closest('.profile-item').querySelector('.form');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

注：如果按钮和div之间没有其他元素，也可以用button.nextElementSibling直接获取，但用closest+querySelector的兼容性和容错性更好。

方法3：事件委托（推荐大量元素场景） #

如果列表数据量很大，用事件委托可以减少事件绑定的数量，提升性能：

修改后的模板代码 #

<div class="profile" id="profile-container">
 {% for i in profile %}
 <div class="profile-item">
  <button class="toggle-btn">Show Form</button>
  ...
  <div class="form">
   <form method="POST" enctype="multipart/form-data">
       <input type="text" name="username">
       <button class="uploadPost" type="submit">submit</button>
   </form>
  </div>
 </div>
 {% endfor %}
</div>

修改后的JS代码 #

// 给父容器绑定一次事件
document.getElementById('profile-container').addEventListener('click', function(e) {
  // 判断点击的是切换按钮
  if (e.target.classList.contains('toggle-btn')) {
    var x = e.target.closest('.profile-item').querySelector('.form');
    x.style.display = x.style.display === "none" ? "block" : "none";
  }
});

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