如何在PHP foreach中结合getElementByClassName复用JavaScript函数？

一、先修复核心语法错误 #

你的JavaScript代码里的for循环存在语法问题，这是浏览器报错的直接原因：

• for循环的三个表达式之间必须用分号分隔，你错误地使用了逗号
• 循环变量i未声明，会造成全局变量污染

修正后的循环代码：

function hiddenButton() {
    var x = document.getElementsByClassName("DIV");
    // 修复分号问题，同时用var声明i
    for (var i = 0; i < x.length; i++) {
        if (x[i].style.display === "none") {
            x[i].style.display = "block";
        } else {
            x[i].style.display = "none";
        }
    }
}

二、优化逻辑：让按钮只控制当前用户对应的DIV #

现在的代码点击任意按钮会切换所有class为DIV的元素，这显然不符合「每个按钮控制对应用户区块」的需求，推荐两种优化方案：

方案1：通过DOM关系直接查找对应元素

修改HTML和JS，让按钮只操作自己相邻的DIV：

<!-- 修改按钮的onclick参数，传入当前按钮对象 -->
<button onclick="hiddenButton(this)">Try it</button>
<div class="DIV" name="DIV">This is my DIV element.</div>

function hiddenButton(btn) {
    // 找到当前按钮的下一个兄弟DIV元素
    const targetDiv = btn.nextElementSibling;
    // 切换显示状态
    if (targetDiv.style.display === "none") {
        targetDiv.style.display = "block";
    } else {
        targetDiv.style.display = "none";
    }
}

方案2：利用PHP生成的用户ID做关联

如果用户区块结构复杂，用ID绑定更可靠：

<!-- 给用户容器加唯一ID，用PHP的$course['Id']生成 -->
<div class="user_style2" id="user-<?php echo $course['Id']; ?>">
    <!-- 按钮传入用户ID -->
    <button onclick="hiddenButton(<?php echo $course['Id']; ?>)">Try it</button>
    <div class="DIV" name="DIV">This is my DIV element.</div>
</div>

function hiddenButton(userId) {
    // 通过用户ID找到对应容器，再查找里面的DIV
    const userContainer = document.getElementById(`user-${userId}`);
    const targetDiv = userContainer.querySelector(".DIV");
    // 切换显示状态
    if (targetDiv.style.display === "none") {
        targetDiv.style.display = "block";
    } else {
        targetDiv.style.display = "none";
    }
}

三、额外优化建议 #

• 尽量避免内联onclick绑定，推荐用addEventListener绑定事件，代码更易维护
• 可以用CSS类控制显示隐藏，比直接操作style更灵活：

  .hidden { display: none; }
  

  // 切换类名即可实现显示隐藏
  targetDiv.classList.toggle("hidden");
  

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