[SOLUCIONADO] Llamar un div de acuerdo a un id

marynella · #1 (**permalink**) 17/09/2015, 10:18

Hola, lo que trato de hacer es que con una función llame un div que contiene varias imagenes que llamo por medio de un while, el div tiene como id una variable de contador, pero siempre llama a la primera imagen ... como hago para resolver esto.

Alexis88 · #2 (**permalink**) 17/09/2015, 10:30

Podrías tomar a todos los elementos <img> de dicho contenedor de esta forma:

Código Javascript:

Ver originalvar imagenes = document.querySelectorAll("#id_del_contenedor img");

En donde debes de reemplazar a id_del_contenedor por el id del <div>. Una vez hayas hecho esto, solo tendrías que recorrer dicho conjunto con una estructura repetitiva:

Código Javascript:

Ver originalfor (var i = 0, total = imagenes.length; i < total; i++){
    //Cada imagen estará representada en imagenes[i]
}

Un saludo

marynella · #3 (**permalink**) 17/09/2015, 10:49

Voy a intentar lo que dices y te cuento como me va

marynella · #4 (**permalink**) 17/09/2015, 11:13

No me funciona; te voy a mostrar mi código; haber si me puedes indicar cual es el error

<?php
$consult="";
$consult1="";
$consult2="";
$consult3="";
$consult4="";
$consult5="";
$consult6="";

require_once('ingreso_herramientas/conexion/conexionadmin.php');

$conta = 'SELECT MAX(num_ingreso) AS num_ingreso FROM registro_ingreso';
$bus = $conexion->query($conta);

if ($bus->num_rows > 0){
$fila = $bus->fetch_array();
$c = 1 + $fila["num_ingreso"];
}

for($i = 1; $i < $c; $i++){

}

$con = $conexion->query("SELECT * FROM registro_ingreso ORDER BY num_ingreso ASC");
if ($con->num_rows > 0 ){
while ($row1 = $con->fetch_array(MYSQLI_ASSOC)){
$consult .=" <option value='".$row1['num_ingreso']."'>".$row1['num_ingreso']."</option>";
$consult2 .=" <option value='".$row1['num_ingreso']."'>".$row1['nombre']."</option>";
?>
<script>
function mostrar(){
document.getElementById("'.$row1['num_ingreso'].'").style.display = "block";
}
function ocultar(){
var imagenes = document.querySelectorAll("#'.$row1['num_ingreso'].'");

for (var i = 0, total = imagenes.length; i < total; i++){
document.getElementById(imagenes[2]).style.display = "none";
}
}
</script>
<html>
<body>
<ul>

<li>Ingreso: <?php echo $row1['num_ingreso']; ?> </li>
Nombre: <?php echo $row1['nombre']; ?>
</ul>
<input type="button" id="btn" value=">" style="border:none; background-color:#ffffff;" onclick="mostrar()" ondblclick="ocultar()" /><br><div id="'.$row1['num_ingreso'].'"><img width='250' height='150' src='ingreso_herramientas/fotos_herramientas/<?php echo $row1['imagen'];?>' alt='imagen herramienta' /></div>
<?php
};
};
?>
</body>
</html>

Alexis88 · #5 (**permalink**) 17/09/2015, 12:59

Necesitas poner orden en tu código.

No se distingue qué es lo que buscas hacer. Veo por ahí un bucle que no ejecuta ninguna instrucción; veo que incluyes código JavaScript dentro de un <select>; veo que quieres imprimir variables de PHP en JavaScript pero sin la sintaxis correcta, entre otras cosas.

Mejor explícanos de una forma concisa qué es lo que deseas formar y qué deseas hacer, así podremos orientarte, primero, para estructurar tu código y, segundo, para hacer lo que buscas.

Un saludo

marynella · #6 (**permalink**) 17/09/2015, 13:31

Lo que quiero hacer es mostrar imágenes que se guardan en phpmyadmin con <img> que se encuentra dentro de un div; tengo 1 botón por cada imagen pero con las funciones que tengo solo logro que muestre y oculte la primera imagen sin importar a que botón le de click y las demás imágenes quedan estáticas...

Aquí leí como pasar variables de php a javscript http://www.gestiweb.com/?q=content/c%C3%B3mo-pasar-variables-de-javascript-php-y-viceversa; pero así como estoy llamando las variables php me funciona.

Alexis88 · #7 (**permalink**) 17/09/2015, 14:53

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

Código PHP:

Ver original<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:

Ver originaldocument.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

marynella · #8 (**permalink**) 17/09/2015, 15:30

Gracias !!! es justo lo que necesitaba