Tengo un Flipbox CSS3 simple que estoy tratando de reutilizar varias veces. Lo mejor sería que cada elemento tuviera un ID único y cada uno de ellos se activara por separado al hacer clic.
En este momento, todos los elementos se activan al hacer clic.
¿Cuál sería el mejor enfoque sin solo duplicar el código?
Aquí demo del código:
https://codepen.io/baidoc/pen/LYeqwxe
let cardTransitionTime = 500; let $card = $('.card'); let switching = false; $('.card').click(flipCard); function flipCard() { if (switching) { return false; } switching = true; $card.toggleClass('is-switched'); window.setTimeout(function () { $card.children().children().toggleClass('is-active'); switching = false; }, cardTransitionTime / 2); }No he pensado en su ejemplo de tiempo de transición y lo dejé en un ejemplo más simplificado, pero por otra parte, simplemente puede usar el argumento de evento que se entrega a su función llamada por defecto:
$('.card').click(flipCard); function flipCard(ev) { ev.currentTarget.classList.toggle('is-switched'); }Aquí creé un detector de eventos en un elemento principal de las tarjetas. No importa cuántas cartas haya, este evento se activará. Cuando haga clic en el encabezado o en uno de los divs principales, se encontrará la <div class="card"> más cercana. Ahora el nombre de la clase se puede alternar para ese elemento.
// event listener for any of the cards document.getElementById('cardwrapper').addEventListener('click', e => { // what card was clicked let card = e.target.closest('.card'); // toogle class name 'is-switched' card.classList.toggle('is-switched'); }); $card-transition-time: 0.5s; .card { perspective: 600px; position: relative; cursor: pointer; } .card.is-switched .card__wrapper { animation: rotate .5s linear both; } .card__wrapper { transform-style: preserve-3d; animation: rotate-inverse .5s linear both; } .card__side { backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; } .card__side.is-active { position: static; } .card__side--back { transform: rotateY(180deg); } @keyframes rotate { 0% { transform: rotateY(0); } 70% { transform: rotateY(200deg); } 100% { transform: rotateY(180deg); } } @keyframes rotate-inverse { 0% { transform: rotateY(180deg); } 70% { transform: rotateY(-20deg); } 100% { transform: rotateY(0); } } // ignore * { box-sizing: border-box; } body { background-color: #fff; text-align: center; padding: 1.5rem; } h1, h2 { margin: 0; } .card { margin: 2rem auto; max-width: 350px; } .card__side { padding: 1em; border-radius: 5px; color: white; background-color: #ff4136; } .card__side--back { background-color: #0074d9; } <div id="cardwrapper"> <div class="card" id="item1"> <div class="card__wrapper"> <div class="card__side is-active"> <h1>Card 1</h1> </div> <div class="card__side card__side--back"> <h2>Card 1</h2> </div> </div> </div> <div class="card" id="item2"> <div class="card__wrapper"> <div class="card__side is-active"> <h1>Card 2</h1> </div> <div class="card__side card__side--back"> <h2>Card 2</h2> </div> </div> </div> </div>