Llamar un div de acuerdo a un id

[Alexis88]

Ya veo. En ese caso, podrías hacer algo como esto:

Código PHP:

<div id = "contenedor">
<?php
while ($row = mysqli_fetch_array($query)){
?>
     <div>
          <img src = "../imagenes/"<?=$row['imagen']?> />
          <button class = "boton">Mostrar/Ocultar</button>
     </div>
<?php
}
?>
</div>
 

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector("#contenedor").addEventListener("click", function(event){
        if (event.target.className == "boton"){
            var boton = event.target,
                padre = boton.parentNode,
                img = padre.querySelector("img");
 
            if (img.offsetHeight > 0){
                img.style.display = "none";
            }
            else{
                img.style.display = "inline";
            }
        }
    }, false);
}, false);
 

El proceso es sencillo. Primero, debes de tener un <div> en el cual almacenarás las imágenes y los botones, lo cual, por lo que cuentas, ya lo tienes. En este ejemplo, le asigno el identificador "contenedor", pero puedes ponerle el que prefieras.

Teniendo esto, procedes con la carga de los datos desde la base de datos. Por cada iteración del bucle, vas a añadir un <div> al <div> principal, el cual contendrá a la imagen y botón respectivo. Esto ayudará a que mantengas aislados cada par imagen-botón y así será más fácil llevar un control para mostrar y ocultar cada imagen.

Al botón le asigno una clase para poder identificarlo más adelante. Para casos en los que manipularemos elementos creados dinámicamente, nos conviene utilizar clases en lugar de un id, ya que las clases sí pueden repetirse, algo que no puede ocurrir con los id. La asignación de la imagen al elemento <img> es solo un ejemplo de cómo puedes hacerlo, puesto que, la ruta que asignes, debe de coincidir con la que realmente corresponde a la imagen.

En el código JavaScript, luego de cargar todos los elementos del documento, se ejecutará una función en la cual se delega una función al elemento de id "contenedor", es decir, al <div> principal, cuando se produzca el evento click en él, como, por ejemplo, cuando se pulse algún elemento que contenga. En dicha función, tomaremos, mediante la propiedad event.target, al elemento directamente afectado por el evento, es decir, al que se le dio el clic. Tomamos su clase y, si es igual a la que asignamos a los botones, lo cual quiere decir que se pulsó alguno de los botones, lo almacenamos en una variable, tomamos al elemento que lo contiene mediante la propiedad .parentNode y buscamos en este a la imagen.

Finalmente, mediante la propiedad .offsetHeight, verificamos si la altura de la imagen es mayor a cero, lo cual equivale a determinar si el elemento es visible. De ser así, lo ocultamos, caso contrario, lo mostramos.

Un saludo