Tengo problemas para que este script de alternar clases funcione en todas las divisiones del proyecto.
Está configurado para que cuando se haga clic en el elemento principal, ambos elementos secundarios cambien la clase .hide , que funciona más como un intercambio.
Tomando nota de esta publicación similar que usa las clases Jquery Toggle dentro de un bucle foreach , lo he abordado de manera diferente porque en este caso hay varias clases para cambiar.
Usé getElementsByClassName y definí el elemento de NodeList como [0] . Esto funciona para el primer proyecto div y para el segundo cuando se cambia a [1] .
Sin embargo, estoy atascado en cómo puedo hacer que esto funcione en todos los subsiguientes divs del Proyecto al mismo tiempo. ¿Esto se hace con un bucle? ¿O usando variables? ¿O usando this palabra clave?
Estoy usando Kirby CMS para generar secciones de contenido, por lo que los divs del proyecto se modelan dentro de un bucle foreach .
document.getElementsByClassName('read-more-div')[0].addEventListener('click', function() { document.getElementsByClassName('read-more-btn1')[0].classList.toggle('hide'); document.getElementsByClassName('read-more-btn2')[0].classList.toggle('hide'); return false }) body { background-color: #000000; color: #ffffff; } p, button { background-color: #000000; color: #ffffff; border: none; padding: 0; margin: 0; } .read-more-btn1 { color: #888888; cursor: s-resize; } .read-more-btn2 { cursor: n-resize; } .read-more-btn1:hover { color: #ffffff; } .hide { display: none; } <div>Project A <div class="read-more-div"> <button class="read-more-btn1">Read more...</button> <p class="read-more-btn2 hide">Toggle this project text</p> </div> </div> <div>Project B <div class="read-more-div"> <button class="read-more-btn1">Read more...</button> <p class="read-more-btn2 hide">Toggle this project text</p> </div> </div> <div>Project C <div class="read-more-div"> <button class="read-more-btn1">Read more...</button> <p class="read-more-btn2 hide">Toggle this project text</p> </div> </div>Muchas maneras de hacer esto. Asegúrese de agregar detectores de eventos a todos los divs y no solo al primero. Mirando su código actual, puede seguir este enfoque.
this detector de eventos interno pertenece al elemento que desencadenó el evento. Entonces, cuando hacemos this.getElementsByClassName , estamos consultando las clases solo dentro de ese elemento en particular.
getElementsByClassName no devuelve una matriz. Devuelve una colección que es similar a una matriz . Para usar forEach() en ese objeto similar a una matriz, se requiere convertirlo en una matriz. Usando el operador ... (spread) para convertir la colección en una matriz.
[...document.getElementsByClassName('read-more-div')].forEach(x => x.addEventListener('click', function() { this.getElementsByClassName('read-more-btn1')[0].classList.toggle('hide'); this.getElementsByClassName('read-more-btn2')[0].classList.toggle('hide'); return false })); body { background-color: #000000; color: #ffffff; } p, button { background-color: #000000; color: #ffffff; border: none; padding: 0; margin: 0; } .read-more-btn1 { color: #888888; cursor: s-resize; } .read-more-btn2 { cursor: n-resize; } .read-more-btn1:hover { color: #ffffff; } .hide { display: none; } <div>Project A <div class="read-more-div"> <button class="read-more-btn1">Read more...</button> <p class="read-more-btn2 hide">Toggle this project text</p> </div> </div> <div>Project B <div class="read-more-div"> <button class="read-more-btn1">Read more...</button> <p class="read-more-btn2 hide">Toggle this project text</p> </div> </div> <div>Project C <div class="read-more-div"> <button class="read-more-btn1">Read more...</button> <p class="read-more-btn2 hide">Toggle this project text</p> </div> </div>