Estoy intentando cargar los datos que estan cargados en mis tajetas generadas dinamicamente con php tomando datos un una tabla sql y pasarlos a un mosaico que el mismo se activa cuando se hace click en una de las tarjetas.
Lo que intenté fue hacer un evento que al hacer click en el nombre de la tarjeta me carge en un variable Js el atributo src de la etiqueta HTML img(a modo de ejemplo) para extraer dicha informacion y ponerla en mi mosaico.El problema es que me carga unicamente los datos de la primera imagen, de la primera tarjeta, por mas que haga click en una tarjeta que contenga otra imagen me devuelve la imagen de la primera tarjeta.
El codigo php tiene todo los includes("");
necesarios para que el programa corra ya que los códigos estan en diferentes archivos.
Desde ya gracias.
Código php
<?php
#Ejecuto consulta y cargo nombre de categorias
foreach($ejecutar_consulta_categories as $row) { ?>
<h2><?php echo $row['nombre'];?></h2>
<input type="hidden" name="id_categories" value=<?php echo $row['id_categories']?>>
<?php
#Consulta a la base de datos de foods pertenecientes a la categoria iterada
$filter = $row['id_categories'];
$consultaFood = "SELECT * FROM food WHERE id_categories = $filter";
$ejecutar_consulta_food = $conexion->query($consultaFood);
?>
<!--Cargo cada food de cada categoria-->
<div class="conteiner_cards">
<?php foreach($ejecutar_consulta_food as $row) { ?>
<div id="<?php echo $row['nombre']?>"class="cards_tienda open-modal" data-open="modal1">
<img src= "<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']?>">
<div class="content_card">
<h3 class="p1"><?php echo $row['nombre']?></h3>
<p class="p2">$<?php echo $row['precio']?></p>
<p class="p3"><?php echo $row['descripcion']?></p>
<!--Formulario para enviar datos al carrito-->
<form action="" method="post">
<input type="hidden" name="id" id="id" value="<?php echo openssl_encrypt($row['id_food'],COD,KEY);?>">
<input type="hidden" name="nombre" id="nombre" value="<?php echo openssl_encrypt($row['nombre'],COD,KEY);?>">
<input type="hidden" name="precio" id="precio" value="<?php echo openssl_encrypt($row['precio'],COD,KEY);?>">
<input type="int" name="cantidad" id="cantidad" value="">
<button id="prevent" name="btnAccion" type="submit" value="Agregar">Agregar al Carrito</button>
</form>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
Código modal php
<div class="modal" id="modal1">
<div class="modal-dialog">
<header class="modal-header">
<button class="close-modal" aria-label="close modal" data-close>✕</button>
</header>
<section class="modal-content">
<img src="" alt="">
</section>
<footer class="modal-footer">...</footer>
</div>
</div>
<script>
// Contenido dinamico del modal
document.addEventListener("click", e=>{
if(e.target.matches("[data-open]")||e.target.matches(`${"[data-open]"} *`)){
let card = document.querySelector(".cards_tienda").firstElementChild;
let src = card.getAttribute("src")
alert(src)
}
});
</script>
<script src="js/modal.js"></script>
Código modal js
//Abre Modal
const openEls = document.querySelectorAll("[data-open]");
const isVisible = "is-visible";
for(const el of openEls) {
el.addEventListener("click", function() {
const modalId = this.dataset.open;
document.getElementById(modalId).classList.add(isVisible);
});
}
//Cierra Modal
const closeEls = document.querySelectorAll("[data-close]");
for (const el of closeEls) {
el.addEventListener("click", function() {
this.parentElement.parentElement.parentElement.classList.remove(isVisible);
});
}
//Cerrar haciendo click fuera del modal
document.addEventListener("click", e => {
if (e.target == document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});
//Cerrar precionando escape
document.addEventListener("keyup", e => {
if (e.key == "Escape" && document.querySelector(".modal.is-visible")) {
document.querySelector(".modal.is-visible").classList.remove(isVisible);
}
});