1

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);
  }
});

1 respuesta 1

0

El problema es que document.querySelector(".cards_tienda") obtiene siempre el primer elemento que encuentre con la clase especificada. El clic puede haber sido en la tarjeta o en alguno de sus descendientes, por lo que debes revisar dónde se realizó (ese if funciona) y obtener el ascendiente con closest()

document.addEventListener("click", e=> {
    if(e.target.matches("[data-open]") || e.target.matches(`${"[data-open]"} *`)) {
        // Obtener tarjeta
        let card = e.target.closest('.cards_tienda');
        // Obtener imagen desde la tarjeta
        let img = card.querySelector('img');
        let src = img.src;
        console.log(src);
        // Si quieres el precio, busca por clase
        let precio = card.querySelector('.p2');
        console.log(precio.textContent);
    }
});
<p>Los clics en este párrafo no entran al condicional.</p>
<div class="conteiner_cards">
    <div class="cards_tienda open-modal" data-open="modal1">
        <img src= "https://source.unsplash.com/user/c_v_r/100x100" alt="Foto 1">
        <div class="content_card">
            <h3 class="p1">Nombre 1</h3>
            <p class="p2">$123</p>
            <p class="p3">Descripción 1</p>
        </div>
    </div>
    <div class="cards_tienda open-modal" data-open="modal1">
        <img src= "https://source.unsplash.com/user/c_v_r/95x95" alt="Foto 1">
        <div class="content_card">
            <h3 class="p1">Nombre 2</h3>
            <p class="p2">$456</p>
            <p class="p3">Descripción 2</p>
        </div>
    </div>
</div>

1
  • Hola @Triby quedó funcionando. Muchas gracias, me enseñaste algo nuevo, desconocia el metodo closet() y su aplicación. Commented el 11 ene. 2022 a las 0:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.