PHP foreach动态生成元素，按钮仅控制对应div显示隐藏问题求助

你的核心问题是当前函数会选中页面上所有.div-oculto元素，没有关联到点击按钮所在的具体课程容器。因为是动态生成的元素，我们可以通过addEventListener结合DOM的相对位置查找来解决这个问题，同时要避免内联onclick的写法，让代码更健壮。

步骤1：修正PHP生成的HTML结构 #

先去掉内联的onclick属性，给按钮添加专属类名，同时修复你代码里缺失的闭合标签（否则DOM结构混乱会影响元素查找）：

<?php foreach ($cursos as $curso) {?>
<div class="contenedor-curso">
 <div class="contenedor-izq">
 <div class="duracion-frecuencia-horario">
 <ul>
 <li>Duración</li>
 <li><strong><?php echo $curso->duracion; ?></strong></li>
 <br>
 <li>Horario</li>
 <li><strong><?php echo $curso->horario; ?></strong></li>
 </ul>
 </div>
 <div class="pedirInfo">
 <!-- 移除onclick，添加类名btn-mostrar -->
 <input type="submit" value="Mostrar" class="btn-mostrar">
 </div>
 <div class="div-oculto">
 <!-- 移除重复的id属性（foreach生成的id会冲突） -->
 <div class="descripcionCurso">
 <p><?php echo $curso->detalle; ?></p>
 </div>
 <div class="pedirInfo">
 <!-- 移除onclick，添加类名btn-oculto -->
 <input type="submit" value="Ocultar" class="btn-oculto">
 </div>
 </div>
 </div> <!-- 补上缺失的.contenedor-izq闭合标签 -->
<?php } ; ?>

步骤2：用addEventListener实现目标功能 #

这里提供两种常用方案，你可以根据场景选择：

方案1：直接给每个按钮绑定事件（直观简单） #

适合课程数量不多的场景，代码逻辑清晰：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 绑定所有"显示"按钮的点击事件
    const mostrarBtns = document.querySelectorAll('.btn-mostrar');
    mostrarBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 找到当前按钮所属的课程容器，再定位里面的隐藏div
            const targetDiv = this.closest('.contenedor-curso').querySelector('.div-oculto');
            targetDiv.style.display = 'block';
        });
    });

    // 绑定所有"隐藏"按钮的点击事件
    const ocultarBtns = document.querySelectorAll('.btn-oculto');
    ocultarBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const targetDiv = this.closest('.contenedor-curso').querySelector('.div-oculto');
            targetDiv.style.display = 'none';
        });
    });
});

• closest('.contenedor-curso')：从当前按钮向上查找最近的课程容器，确保只操作当前课程的元素
• querySelector('.div-oculto')：在容器内部精准定位目标div，不会影响其他课程

方案2：事件委托（性能更优，支持动态新增元素） #

如果课程数量极大，或者后续会通过AJAX动态添加课程，事件委托是更好的选择——只在父元素绑定一个事件，所有按钮都能响应：

document.addEventListener('DOMContentLoaded', function() {
    // 在document上绑定点击事件，通过事件冒泡判断目标元素
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('btn-mostrar')) {
            const targetDiv = e.target.closest('.contenedor-curso').querySelector('.div-oculto');
            targetDiv.style.display = 'block';
        } else if (e.target.classList.contains('btn-oculto')) {
            const targetDiv = e.target.closest('.contenedor-curso').querySelector('.div-oculto');
            targetDiv.style.display = 'none';
        }
    });
});

这种方式的优势是：后续新增的课程按钮不需要重新绑定事件，自动就能生效。

额外优化：用CSS类控制显示状态 #

比起直接修改style.display，更推荐用CSS类来管理状态，代码更易维护：

/* 默认隐藏 */
.div-oculto {
    display: none;
}
/* 显示状态的类 */
.div-oculto.active {
    display: block;
}

然后JS里只需要切换类名即可：

// 显示时
targetDiv.classList.add('active');
// 隐藏时
targetDiv.classList.remove('active');

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