Soy relativamente nuevo en la programación. Conseguí que mi eventListener de 'clic' funcionara, y cuando haces clic en los dos primeros li en el ul, la clase del div se activa y desactiva. Sin embargo, cuando hace clic en cualquier li después del segundo, ¿alterna la clase de cada otro div y no en el que se hace clic? Si necesita más aclaraciones sobre la situación, no dude en hacérmelo saber.
Por ejemplo, si el bucle for imprimiera:
Si hago clic en 'press de banca' y 'peso muerto', alternará .info y mostrará la información correspondiente; pero si tuviera que hacer clic en 'squat', alternará .info para el 'curl', y así sucesivamente...
Aquí está todo el código,
<div> {% for workout in workouts %} <ul> <li class="item">{{ workout.name }}</li> {% autoescape false %} <div class="info" id="info"> <p>{{ workout.description }}</p> </div> {% endautoescape %} </ul> {% endfor %} </div> let li = document.querySelectorAll("li"); let info = document.querySelectorAll(".info"); for (let i = 0; i < li.length; i++) { li[i].addEventListener("click", function () { info[i].classList.toggle("info"); }); } .info { display: none; }Su código javascript está bien.
Asegúrate de que tu HTML sea válido.
Cada etiqueta html debe cerrarse correctamente. Entonces, entre <tag /> o <tag> </tag> , cuando el navegador encuentra lo que considera incompleto, intentará arreglar las cosas, lo que podría causar que sus pares <li> y <div> se desalineen.
Vi que editó su pregunta, por lo que es posible que ya no sea relevante.
tenga en cuenta que depura e inspecciona el html real que ha interpretado el navegador, rightclick-> inspect se abrirá una vista donde puede ver el estado del navegador
let li = document.querySelectorAll("li"); let info = document.querySelectorAll(".info"); for (let i = 0; i < li.length; i++) { li[i].addEventListener("click", function() { info[i].classList.toggle("info"); }); } .info { display: none; } .info-colour { background: chocolate; } .item { margin-top: 1rem; background: orange; } p { margin: 0 } <div> <ul> <li class="item"> workout.name 1</li> <div class="info info-colour"> <p> workout.description 1 </p> <div> Necessary Workout Equpiment: [Specific Machinery] </div> </div> <li class="item">workout.name 2</li> <div class="info info-colour"> <p> workout.description 2 </p> <div> Necessary Workout Equpiment: [Specific Machinery] </div> </div> <li class="item">workout.name 3</li> <div class="info info-colour"> <p> workout.description 3 </p> <div> Necessary Workout Equpiment: [Specific Machinery] </div> </div> </ul> </div>La variable i almacena el último valor después del bucle, ya que se encuentra en otra función de devolución de llamada.
Prueba esta solución:
let li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { let liItem = li[i]; liItem.addEventListener("click", function () { liItem.querySelector("div").classList.toggle("info"); }); }