Come fare un pulsante div flip on premere?

Question

Sto provando a fare un div flip dopo aver fatto clic su un pulsante, ma sembra che non funzioni correttamente e non riesco a capire perché. Mi stavo chiedendo se qualcuno sarebbe stato in grado di indicarmi la giusta direzione e correggere i miei errori.

Il mio codice:

var init = function() { 
 
    var card = document.getElementById('card'); 
 

 
    document.getElementById('flip').addEventListener('click', function() { 
 
    card.toggleClassName('flipped'); 
 
    }, false); 
 
}; 
 

 
window.addEventListener('DOMContentLoaded', init, false);

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    perspective: 800px; 
 
} 
 
#card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: transform 1s; 
 
} 
 
#card figure { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: hidden; 
 
} 
 
#card .front { 
 
    background: red; 
 
} 
 
#card .back { 
 
    background: blue; 
 
    transform: rotateY(180deg); 
 
} 
 
#card.flipped { 
 
    transform: rotateY(180deg); 
 
}

<section class="container"> 
 
    <div id="card"> 
 
    <figure class="front">1</figure> 
 
    <figure class="back">2</figure> 
 
    </div> 
 
</section> 
 

 
<section id="options"> 
 
    <p> 
 
    <button id="flip">Flip Card</button> 
 
    </p> 
 
</section>

è possibile trovare un JSFiddle here.

Grazie.

Answer 1

C'erano due cose che mantengono il codice da running:

1. JSFiddle corre JavaScript onLoad di default, che è dopo l'evento DOMContentLoaded che si sta aspettando, in modo da rimuovere che ai fini della Solo JSFiddle.

2. Non esiste la funzione toggleClassName in vaniglia JavaScript, in base alle mie conoscenze. Invece l'ho cambiato per passare dall'elenco delle classi.

Ecco il codice fisso e funzionante. Ho accorciato l'altezza della scatola in modo che si adatti meglio nella confezione demo.

Demo Live:

var card = document.getElementById('card'); 
 

 
document.getElementById('flip').addEventListener('click', function() { 
 
    card.classList.toggle('flipped'); 
 
}, false);

.container { 
 
    width: 200px; 
 
    height: 100px; 
 
    position: relative; 
 
    perspective: 800px; 
 
} 
 

 
#card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: transform 1s; 
 
} 
 

 
#card figure { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: hidden; 
 
} 
 

 
#card .front { 
 
    background: red; 
 
} 
 

 
#card .back { 
 
    background: blue; 
 
    transform: rotateY(180deg); 
 
} 
 

 
#card.flipped { 
 
    transform: rotateY(180deg); 
 
}

<section class="container"> 
 
    <div id="card"> 
 
    <figure class="front">1</figure> 
 
    <figure class="back">2</figure> 
 
    </div> 
 
</section> 
 

 
<section id="options"> 
 
    <p> 
 
    <button id="flip">Flip Card</button> 
 
    </p> 
 
</section>

JSFiddle Versione: https://jsfiddle.net/dL9v1ozf/2/

Answer 2

Il frammento qui sotto vi risolvere il problema.

Scoprire cosa c'è che non va

• la console e console.log sono i tuoi amici. Se aggiungi console.log('clicked me') o alert('hi') al tuo codice all'interno dell'evento click, vedrai che non succede nulla. Quindi se l'evento click non si attiva, cosa c'è di sbagliato?
• La rimozione di DOMContentLoaded fa funzionare l'evento click! (Fiddle). Se apri la console, puoi vedere un errore: Uncaught TypeError: card.toggleClassName is not a function. Questo perché toggleClassName non è un nome di metodo valido.
• utilizzare il metodo invece di toggleClassName() cose
• Clean up classList.toggle() facendo alcune variabili con nomi leggibili (ad esempiodemo, card per l'elemento #card, e flipBtn per il pulsante #flip)

di lavoro:

(function() { 
 
    var card = document.querySelector('#card'); 
 
    var flipBtn = document.querySelector('#flip'); 
 
    flipBtn.addEventListener('click', function() { 
 
    card.classList.toggle('flipped'); 
 
    }); 
 
})();

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    perspective: 800px; 
 
} 
 

 
#card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
    transition: transform 1s; 
 
    color: white; 
 
} 
 

 
#card figure { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    backface-visibility: hidden; 
 
} 
 

 
#card .front { 
 
    background: red; 
 
} 
 

 
#card .back { 
 
    background: blue; 
 
    transform: rotateY(180deg); 
 
} 
 

 
#card.flipped { 
 
    transform: rotateY(180deg); 
 
}

<section class="container"> 
 
    <div id="card"> 
 
    <figure class="front">1</figure> 
 
    <figure class="back">2</figure> 
 
    </div> 
 
</section> 
 

 
<section id="options"> 
 
    <p> 
 
    <button id="flip">Flip Card</button> 
 
    </p> 
 
</section>

Alcune considerazioni finali

• Un sacco di siti sandbox (come jsbin e jsfiddle) già contengono tutto il codice JavaScript con window.onload per comodità.
• Quindi, se stai scrivendo JS in una sandbox, non utilizzare window.onload o DOMContentLoaded perché è già stato attivato quando il browser raggiunge il tuo codice. Quindi, il tuo codice non funzionerà mai.
• In un ambiente non sandbox, assicurati di chiamare lo snippet di JavaScript sopra riportato dopo aver caricato la pagina o di inserirlo nella parte inferiore della pagina (prima del tag di chiusura body).

window.onload = function() { 
    var card = document.querySelector('#card'); 
    var flipBtn = document.querySelector('#flip'); 
    flipBtn.addEventListener('click', function() { 
    card.classList.toggle('flipped'); 
    }); 
} 

Answer 3

ho aggiornato il vostro violino https://jsfiddle.net/scf0ma4c/5/ il tuo codice era un po 'fuori.

in puro JavaScript, invece di utilizzare:

card.toggleClassName('flipped'); 

che non esiste affatto dovreste usare:

+=card.className 

Se si utilizzano jQuery:

$("#card").toggleClass("flipped"); 

marche è più facile.

credo utilizzando:

window.addEventListener('DOMContentLoaded', init, false); 

è completamente inutile dal momento che si desidera il flip si verifichi al clic, quindi l'ho rimosso.

Dai un'occhiata al violino per altro lì.