2

Tengo un problema, lo que quiero que haga es que cuando haga un click en una imagen de una flecha se levante una sección en una card. El código funciona pero no levanta una sola si no que levanta todas a la vez.

JS

 const weather = document.querySelectorAll(".open-weathers");
 const clickOpenMoreInf = function (e){

  const wrapWeathers = document.querySelectorAll(".weathers");
  wrapWeathers.forEach( contInf =>{
    contInf.style.transform="translateY(-175px)";
  })
 }

 weather.forEach(boton =>{
   boton.addEventListener("click", clickOpenMoreInf);
 })

HTML

 <div class="card">
   <div class="card-wrap-info">
     <p class="parrafo-country-city">Cancún, MX</p>
     <img class="img2"src="http://openweathermap.org/img/wn/03d.png">
     <p class="actual-temp2"></p>
     <p class="card-parrafo-max2">Temperatura maxíma 31.01°C</p>
     <p class="card-parrafo-min2">Temperatura minima 26.41°C</p>
  <div class="weathers">
     <img class="open-weathers" src="./icons/sort-down-solid.svg">
     <p class="temp-day2">31.01</p>
     <p class="temp-morn2">26.41</p>
     <p class="temp-night2">27.27</p>
    </div>
   </div>
 </div>

introducir la descripción de la imagen aquí

Lo que esta en rojo es lo que se tiene que levantar, pero al hacer click en la flecha se levantan todas

4
  • estas seleccionando todos los ".weathers" del documento en esta linea const wrapWeathers = document.querySelectorAll(".weathers");. deberias selecionar solo el relacionado con el boton que diste click.
    – Edel Rojas
    Commented el 27 sept. 2020 a las 21:19
  • si tienes dudas en cuanto a lo anterior puedes publicar tu html.
    – Edel Rojas
    Commented el 27 sept. 2020 a las 21:21
  • Estaría genial que nos mostraras la estructura de tu HTML para poder ayudarte mejor. Commented el 27 sept. 2020 a las 23:55
  • @NikolaTesla ya eh subidoel codigo HTML de una card Commented el 28 sept. 2020 a las 0:27

2 respuestas 2

3

El comportamiento al hacer clic en un elemento debería ser:

  • Restablecer todos, eliminando la propiedad
  • Obtener elemento actual con e.target
  • Desde ahí, obtener el padre con .closest('div')
  • Aplicar el estilo deseado
 const weather = document.querySelectorAll(".open-weathers");
 const clickOpenMoreInf = function (e){
   // Obtener todos los elementos
   const wrapWeathers = document.querySelectorAll(".weathers");
   // Recorrer todos para restablecer estilo
   wrapWeathers.forEach( contInf => {
     // Evitar hacerlo en el elemento que disparó el evento
     if(e.target.closest('div') != contInf) {
         contInf.style.transform = '';
     }
   })
   // Aplicar estilo solo al que corresponde
   let contInf = e.target.closest('div');
   if(contInf.style.transform == '') {
       // No tiene el estilo, aplicarlo
       contInf.style.transform = "translateY(-175px)";
   } else {
       // Ya tiene el estilo, removerlo
       contInf.style.transform = '';
   }
 }

 weather.forEach(boton =>{
   boton.addEventListener("click", clickOpenMoreInf);
 })

Sería recomendable agregar o eliminar clase para aplicar los efectos en lugar de hacerlo directamente en el estilo, pero con esto ya debe funcionar.

Actualización:

Si el elemento ya tiene el efecto, al hacer clic otra vez, lo quita. Pero debo insistir en uso de clases CSS, porque se simplificaría mucho el código, en lugar del if bastaría un elemento.classList.toggle('nombre_de_clase');, por ejemplo:

     const weather = document.querySelectorAll(".open-weathers");
     const clickOpenMoreInf = function (e){
       // Obtener todos los elementos
       const wrapWeathers = document.querySelectorAll(".weathers");
       // Recorrer todos para restablecer estilo
       wrapWeathers.forEach( contInf => {
         // Evitar hacerlo en el elemento que disparó el evento
         if(e.target.closest('div') != contInf) {
             contInf.classList.remove('active');
         }
       })
       // Aplicar estilo solo al que corresponde
       e.target.closest('div').classList.toggle('active');
     }
    
     weather.forEach(boton =>{
       boton.addEventListener("click", clickOpenMoreInf);
     })
.active {
    transform:translateY(-175px);
}
 <div class="card">
   <div class="card-wrap-info">
     <p class="parrafo-country-city">Cancún, MX</p>
     <img class="img2"src="http://openweathermap.org/img/wn/03d.png">
     <p class="actual-temp2"></p>
     <p class="card-parrafo-max2">Temperatura maxíma 31.01°C</p>
     <p class="card-parrafo-min2">Temperatura minima 26.41°C</p>
  <div class="weathers">
     <img class="open-weathers" src="./icons/sort-down-solid.svg">
     <p class="temp-day2">31.01</p>
     <p class="temp-morn2">26.41</p>
     <p class="temp-night2">27.27</p>
    </div>
   </div>
 </div>
 
  <div class="card">
   <div class="card-wrap-info">
     <p class="parrafo-country-city">Cancún, MX</p>
     <img class="img2"src="http://openweathermap.org/img/wn/03d.png">
     <p class="actual-temp2"></p>
     <p class="card-parrafo-max2">Temperatura maxíma 31.01°C</p>
     <p class="card-parrafo-min2">Temperatura minima 26.41°C</p>
  <div class="weathers">
     <img class="open-weathers" src="./icons/sort-down-solid.svg">
     <p class="temp-day2">31.01</p>
     <p class="temp-morn2">26.41</p>
     <p class="temp-night2">27.27</p>
    </div>
   </div>
 </div>

6
  • Gracias!! bro me funciono Commented el 28 sept. 2020 a las 0:47
  • @FernandoDelgado, no olvides marcar la respuesta como aceptada.
    – Triby
    Commented el 28 sept. 2020 a las 0:51
  • ok ya esta listo Commented el 28 sept. 2020 a las 0:57
  • oie bro, tengo un problemilla quise intentarlo solo pero no pude xd, cuando se haces click y se alza esa seccion (eso fuciona bien) pero si haces click nuevamente para que se baje este ya no se baja... Hasta que hagas click en otro elemento Commented el 30 sept. 2020 a las 19:59
  • @FernandoDelgado, listo, revisa la actualización
    – Triby
    Commented el 30 sept. 2020 a las 20:09
0

No estas usando el evento ligado a tus EventListener, si no que estas apuntando a todos tus elementos que tengan la clase weathers como podemos observar aqui en la funcion clickOpenMoreInf:

wrapWeathers.forEach( contInf =>{
    contInf.style.transform="translateY(-175px)";
})

La forma mas facil de arreglar esto es simplemente usando el evento ligado al EventListener, mediante su propiedad target de esta manera:

const weather = document.querySelectorAll(".open-weathers");
const clickOpenMoreInf = function (e){
    e.target.style.transform="translateY(-175px)";
}

weather.forEach(boton =>{
   boton.addEventListener("click", clickOpenMoreInf);
})

De esta manera la accion solo ocurriria con el boton clikeado de la tarjeta y no todos.

Sin embargo como no haz puesto html no me queda claro cual de las dos clases (.open-weathers o weathers) es los botones, supongo será .open-weathers.

Si es asi el codigo cumplira con su proposito.

En caso contrario los eventos oyentes deben ser añadidos a los elementos que conformen los botones como tal y no la tarjeta.

Nota: la propiedad target de un evento oyente hace referencia al elemento actual en el que se desencadeno la accion del evento oyente, por lo cual es perfecto para tu proposito. tambien existe currentTarget, pero en ocasiones currentTarget es diferente a target, esto dependera si hay subcontenedores o no.

8
  • Por cierto, estas usando forEach en el resultado de un querySelectorAll y se me hace raro que esto no haya dado problemas. si te da un error debido al forEach me dices y edito la pregunta para poder que puedas usar el forEach. ya que normalmente el resultado de un querySelectorAll no es directamente iterable con un forEach.
    – Layer
    Commented el 27 sept. 2020 a las 21:23
  • 1
    por qué dices que el resultado de un querySellectorAll no es directamente iterable con un forEach has intentado mostrar por consola lo que te trae querySellectorAll ?? Nos trae un nodeList de solo lectura, por lo que al ser una lista de nodos puedes iterarlo con un forEach sin problema, has intentado mostrar por consola que es un querySellectorAll?? Te invito a que lo hagas con typeOf has intentado poner un .length al resultado de querySellectorAll ? Te invito a leer más sobre el peculiar caso de querySellectorAll fliparas de lo interesante que es. Commented el 27 sept. 2020 a las 21:41
  • Que te arroja cuando imprimes por consola el resultado de un querySellectorAll ?que te arroja cuan imprimes typeOf al resultado de un querySellectorAll? que te arroja cuando imprimes .length al resultado de un querySellectorAll ?Me extraña que si lo has intentado muchas veces no logres comprender el por qué forEach itera sin problema el resultado de un querySellectorAll. Commented el 27 sept. 2020 a las 21:49
  • Si, aparentemente me he confundido, lo que no se puede iterar con un forEach es un HTMLCollection, el cual me ha salido en otras ocasiones en ionic, tienes razon, aquello que hizo el usuario es valido.
    – Layer
    Commented el 27 sept. 2020 a las 21:49
  • Me he confundido porque normalmente no uso querySelectorAll, uso es simplemente querySelector, el cual si retorna un HTMLCollection. se agradece la critica constructiva, error mio.
    – Layer
    Commented el 27 sept. 2020 a las 21:50

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.