如何在PHP foreach中使用JS的this实现按钮单独控制文本显示

当前代码点击按钮后会切换所有用户的文本显示状态，原因是JS里直接获取了所有类名为DIV的元素并批量修改，同时函数参数使用了关键字this导致语法错误。以下是修复方案：

关键修改点 #

• 替换函数参数里的this（JS关键字，不能作为形参）为合法变量名，比如btn
• 点击按钮时，先隐藏所有文本DIV，再显示当前按钮对应的那个DIV
• 利用DOM元素的兄弟关系定位目标DIV，避免操作所有元素

修改后的完整代码 #

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  <div class="card">
      <div class="card-body">
          <div style="padding-top: 90px; padding-left: 30px;">
              <div class="user_style2">
                  <!-- foreach循环生成的每个用户区块 -->
                  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
                      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                          <p>install_id</p>
                          <p>branch_id</p>
                      </div>
                      <button onclick="toggleUserText(this)">Try it</button>
                      <div class="DIV" name="DIV" style="display: none;">
                          This is my DIV element.
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
<?php
                }
                // End the foreach loop 
           ?>
<script>
  function toggleUserText(btn) {
      // 1. 隐藏所有文本DIV
      const allDivs = document.getElementsByClassName("DIV");
      for (let i = 0; i < allDivs.length; i++) {
          allDivs[i].style.display = "none";
      }
      
      // 2. 显示当前按钮对应的DIV
      const targetDiv = btn.nextElementSibling;
      if (targetDiv) {
          targetDiv.style.display = "block";
      }
  }
</script>
</body>

额外场景适配 #

如果需要的是仅切换当前文本的显示/隐藏，其他保持原有状态，可以去掉隐藏所有DIV的代码，只修改当前目标元素：

function toggleUserText(btn) {
    const targetDiv = btn.nextElementSibling;
    if (targetDiv) {
        targetDiv.style.display = targetDiv.style.display === "none" ? "block" : "none";
    }
}

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