4

El forEach funciona, trae toda la info de mis cards que generé en un array, las funciones de ver más y botón volver funcionan de todas las cards pero me devuelven sólo la información de la primer card.

Éste es el código:

let cards = [
 { url: "https://placehold.it/50/30/eee", city: "A", cajaOculta: "AA1" },
 { url: "https://placehold.it/50/30/ff0", city: "B", cajaOculta: "BB1" },
 { url: "https://placehold.it/50/30/f00", city: "C", cajaOculta: "CC1" }
];
let card = document.getElementById('cards')

cards.forEach((info) => {
  console.log(info)
  card.innerHTML += `
    <div class="card">
        <img src="${info.url}" id="img">
        <a id="city" class="city" onclick="verDescripcion()">${info.city}</a>
        <div id="caja-oculta" style="display: none;">
            <p class="textDesc">"${info.cajaOculta}"</p>
        </div>
        <button id="btnPrev" onclick="botonVolver()"> BACK</button>
    </div>
    `
})

const cajaOculta = document.getElementById('caja-oculta')
const city = document.getElementById('city')
const btnprev = document.getElementById('btnPrev')
const img = document.getElementById('img')


function verDescripcion() {
  if (cajaOculta, card, city, img) {
    cajaOculta.style.display = 'block'
    card.style.background = 'black'
    city.style.display = 'none'
    img.style.display = 'none'
  }
}

function botonVolver() {
  if (cajaOculta, img, card) {
    cajaOculta.style.display = 'none'
    img.style.display = 'block'
    city.style.display = 'block'
  }
}
<div id="cards"></div>

2

2 respuestas 2

4

El problema es que el código dentro del forEach va a generar IDs duplicados. Entonces, al hacer los document.getElementById sólo va a seleccionar el primero en vez de el que corresponde al botón que se pulsó (que me imagino es lo que quieres).

Para solucionar esto, lo primero sería cambiar los IDs por clases (los IDs duplicados hacen el HTML no válido). Después, hay varias maneras de solucionarlo. Te pongo un par de ellas: una sería añadir IDs únicos y seleccionar los elementos dentro de las funciones. Otra opción sería seleccionar los elementos en la card del botón que se pulsó.

Aquí te dejo una manera de hacerlo siguiendo ese último método:

let cards = [
 { url: "https://placehold.it/50/30/eee", city: "A", cajaOculta: "AA1" },
 { url: "https://placehold.it/50/30/ff0", city: "B", cajaOculta: "BB1" },
 { url: "https://placehold.it/50/30/f00", city: "C", cajaOculta: "CC1" }
];
let card = document.getElementById('cards')

cards.forEach((info) => {
  console.log(info)
  // he cambiado los IDs con clases para que no haya IDs duplicados
  card.innerHTML += `
    <div class="card">
        <img src="${info.url}" class="img">
        <a class="city" class="city" onclick="verDescripcion()">${info.city}</a>
        <div class="caja-oculta" style="display: none;">
            <p class="textDesc">"${info.cajaOculta}"</p>
        </div>
        <button class="btnPrev" onclick="botonVolver()"> BACK</button>
    </div>
    `
});


function verDescripcion(e) {
  // seleccionamos la card del botón que se pulsó usando la función closest
  const card = event.target.closest(".card");

  // seleccionamos los elementos dentro de esa card con querySelector
  const cajaOculta = card.querySelector('.caja-oculta');
  const city = card.querySelector('.city');
  const btnprev = card.querySelector('.btnPrev');
  const img = card.querySelector('.img');

  if (cajaOculta, card, city, img) {
    cajaOculta.style.display = 'block'
    card.style.background = 'black'
    city.style.display = 'none'
    img.style.display = 'none'
  }
}

function botonVolver() {
  // seleccionamos la card del botón que se pulsó usando la función closest
  const card = event.target.closest(".card");

  // seleccionamos los elementos dentro de esa card con querySelector
  const cajaOculta = card.querySelector('.caja-oculta');
  const city = card.querySelector('.city');
  const img = card.querySelector('.img');

  if (cajaOculta, img, card) {
    cajaOculta.style.display = 'none'
    img.style.display = 'block'
    city.style.display = 'block'
  }
}
<div id="cards"></div>


Como referencia:

  • .closest(): selecciona el primer ancestro que cumpla con el selector especificado como parámetro. Con este método seleccionamos la card que contiene el botón pulsado.
  • .querySelector(): devuelve el primer descendiente que cumpla con el selector pasado como parámetro. Está función normalmente se usa con document pero puede usarse con cualquier elemento.
2
2

Tal como te dicen en la otra respuesta, uno de los problemas es que estás generando valores id duplicados, por lo cual al buscar en el DOM un elemento por su id usando document.getElementById te traerá el primero que encuentra.

Por mi parte pienso que podrías usar el mismo método, tanto para el elemento tipo anchor como para el botón. He ajustado un poco el código para reutilizar la función. Además he utilizado la propiedad CSS visibility y el método toggle del objeto classList del elemento.

He creado una clase de CSS:

  • .oculta, que aplica la visibildad del elemento como hidden (oculta) y una altyura máxima de 0, para que el elemento no ocupe espacio en la página.
.oculta {
  visibility: hidden;
  max-height: 0;
}

De esta forma, cada vez que se ejecuta la función, se buscan los elementos, usando el valor correcto de id y se hace un cambio de la clase aplicada.

Para poder crear de forma dinámica el id del elemento, usamos el valor del índice de cards que estamos recorriendo, para ello hacemos, por ejemplo: id="caja-oculta-${index}", lo cual nos devolverá algo como id="caja-oculta-0" para el caso de index igual a 0.

Por último, he almacenado el valor de index como propiedad del elemento usando un atributo data-*, que me permitirá construir el valor del id del elemento apropiado cuando se hace clic en el elemento que tiene asociada la acción.

El código funcional se puede ver a continuación:

let cards = [
 { url: "https://placehold.it/50/30/eee", city: "A", cajaOculta: "AA1" },
 { url: "https://placehold.it/50/30/ff0", city: "B", cajaOculta: "BB1" },
 { url: "https://placehold.it/50/30/f00", city: "C", cajaOculta: "CC1" }
];
let card = document.getElementById('cards')

cards.forEach((info, index) => {
  card.innerHTML += `
    <div class="card">
        <img src="${info.url}" id="img-${index}">
        <a
          id="city-${index}"
          data-index="${index}"
          onclick="toggleDescription(this)">
            ${info.city}
        </a>
        <div id="caja-oculta-${index}" class="oculta">
            <p class="textDesc">"${info.cajaOculta}"</p>
        </div>
        <button id="btnPrev-${index}" data-index="${index}" onclick="toggleDescription(this)"> BACK</button>
    </div>
    `
})

function toggleDescription(element) {
  const city = document.getElementById(`city-${element.dataset.index}`);
  const caja = document.getElementById(`caja-oculta-${element.dataset.index}`);
  const img = document.getElementById(`img-${element.dataset.index}`);
  if (caja, city, img) {
    city.classList.toggle('oculta');
    caja.classList.toggle('oculta');
    img.classList.toggle('oculta');
  }
}
.oculta {
  visibility: hidden;
  max-height: 0;
}
<div id="cards"></div>

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.