javascript - getElementsByClassName 从 php foreach 获取一个元素

Question

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

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

我的问题是当我点击“Ocultar”时，它隐藏了“div-oculto”类中的所有 div，而不仅仅是选定的 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";
            }
        }
    }