getElementsByClassName 获取一个来自 php foreach 的元素

Question

我在 HTML 中有这段代码，在 PHP 中有一个 foreach，以便它生成每个 div。

当我单击 Ocultar(hide) 和 Mostrar(show) 时，我想更改 div class="div-oculto" 的样式，但仅在所选的 div 中。

我的问题是当我点击“Ocultar”时，它隐藏了“div-oculto”类中的所有 div，而不仅仅是选定的。当我单击“Mostrar”时也会发生同样的情况。它显示了所有 div class="div-oculto"，而不仅仅是选定的。

我不能使用getElementById()，因为每个div都是根据PHP生成的foreach创建的。

我想我必须在我的元素中添加一个 addEventListener()，但我不知道该怎么做才能让它工作。

请帮帮我。

非常感谢，非常感谢！

<script type="text/javascript">
 
  function Mostrar(){
    var elements = document.getElementsByClassName('div-oculto');

    for(var i = 0; i < elements.length; i++) {
      elements[i].style.display = 'block';
      }
    }


function Ocultar(){
  var elements = document.getElementsByClassName('div-oculto');

  for(var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
    }
  }

</script>

<?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">
      <input type="submit" value="Mostrar" onclick="Mostrar()">
    </div>



  <div class="div-oculto" id="div-oculto">
    <div class="descripcionCurso">
      <p><?php echo $curso->detalle; ?></p>
    </div>

  <div class="pedirInfo">
    <input type="submit" value="Ocultar" onclick="Ocultar()">
   </div>
    
  </div>

<?php } ; ?>

Answer 1

是的，您需要为每个要单击的对象应用一个事件侦听器，但不是作为一个组。不过，您仍然可以对这些组使用相同的处理函数。 例如：

    var ocultoElements = [];
    window.onload = function () {
        ocultoElements = document.getElementsByClassName('div-oculto');
        for (i = 0; i < elements.length; i++) {
            ocultoElements[i].addEventListener("click", oculto_clickHandler.bind(this));
        }
    }
    function oculto_clickHandler(e) {
        for (i = 0; i < ocultoElements.length; i++) {
            if (ocultoElements[i] !== e.target) {
                ocultoElements[i].style.display = "none";
            }
            else {
                ocultoElements[i].style.display = "block";
            }
        }
    }