Los siguientes códigos definen cuadros que se voltean cuando se toca o se hace clic en cualquier área del cuadro, pero preferiría que esta función fuera específica de un botón para que, en lugar de hacer clic en cualquier área del cuadro para lograr un giro, se use un botón en su lugar. . ¿Cómo puedo modificar este código para lograr esto?
Quiero que el botón dentro de estos divs sea responsable de la función de volteo en lugar de tener que hacer clic en cualquier área del cuadro y me gustaría lograr esta posibilidad en todos los casos.
cards.forEach(card => { card.addEventListener('click', function() { card.classList.toggle('is-flipped'); }); }) .flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; } .card { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1s; transform-style: preserve-3d; } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: #333; color: white; transform: rotateY(180deg); } .card.is-flipped { transform: rotateY(180deg); } <div class="flip-box"> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> </div> <br/> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> </div> </div>Suponiendo que todas las etiquetas de los button son "clic para voltear" y:
cards = someRoot.querySelectorAll(".card");puede modificar el código a:
cards.forEach(card => { // For each card card.querySelectorAll("div > button").forEach(btn => { // For each button on the card sides btn.addEventListener("click", ev => { // Toggle the "is-flipped" class ev.target.parentElement.parentElement.classList.toggle("is-flipped"); }); }); });demostración completa:
// Get all cards var cards = document.querySelectorAll(".card"); cards.forEach(card => { // For each card card.querySelectorAll("div > button").forEach(btn => { // For each button on the card sides btn.addEventListener("click", ev => { // Toggle the "is-flipped" class of the button parent's parent ev.target.parentElement.parentElement.classList.toggle("is-flipped"); }); }); }); .flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; } .card { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1s; transform-style: preserve-3d; } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: #333; color: white; transform: rotateY(180deg); } .card.is-flipped { transform: rotateY(180deg); } <div class="flip-box"> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> </div> <br/> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> some text </p> <p> some text </p> <button> click to flip </button> </div> </div> </div>