Wie man einen Div Flip auf Knopfdruck macht?

Question

Ich versuche, eine div flip machen, sobald eine Schaltfläche geklickt wurde, aber es scheint nicht richtig zu funktionieren und ich kann nicht herausfinden, warum. Ich habe mich gefragt, ob irgendjemand in der Lage sein würde, mich in die richtige Richtung zu lenken und meine Fehler zu korrigieren.

Mein Code:

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>

Sie können here ein JSFiddle finden.

Vielen Dank.

Answer 1

Es gibt zwei Dinge, die Ihren Code aus Laufen zu halten:

1. JSFiddle läuft JavaScript in onLoad standardmäßig, die nach dem DOMContentLoaded Ereignisse, das Sie darauf warten, so entfernen, dass für die Zwecke der JSFiddle nur.

2. Es gibt keine toggleClassName Funktion in Vanilla JavaScript nach bestem Wissen. Stattdessen habe ich es geändert, um mit der Klassenliste zu wechseln.

Hier ist der feste und funktionierende Code. Ich habe die Höhe der Box verkürzt, damit sie besser in die Demo-Box passt.

Live Demo:

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 Version: https://jsfiddle.net/dL9v1ozf/2/

Answer 2

Das folgende Snippet wird Ihr Problem beheben.

Herauszufinden, was falsch ist

• Die Konsole und console.log sind deine Freunde. Wenn Sie innerhalb des Ereignisses clickconsole.log('clicked me') oder alert('hi') hinzufügen, wird nichts passieren. Also, wenn das Ereignis click nicht ausgelöst wird, was ist falsch?
• Durch Entfernen der DOMContentLoaded funktioniert das Klickereignis! (Fiddle). Wenn Sie die Konsole öffnen, können Sie einen Fehler sehen: Uncaught TypeError: card.toggleClassName is not a function. Das liegt daran, dass toggleClassName kein gültiger Methodenname ist.
• Verwenden Sie die classList.toggle() Methode anstelle von toggleClassName()
• Saubere Dinge durch einige Variablen mit den Menschen lesbaren Namen zu machen (z, card für das #card Element und flipBtn für die #flip Taste)

Arbeits Demo:

(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>

Einige abschließende Gedanken

• Viele Sandbox-Sites (wie Jsbin und Jsfiddle) wickeln bereits den gesamten JavaScript-Code mit window.onload als eine Annehmlichkeit für Sie.
• Also, wenn Sie JS in einer Sandbox schreiben, verwenden Sie nicht window.onload oder DOMContentLoaded, weil es bereits ausgelöst hat, wenn der Browser zu Ihrem Code kommt. Daher wird Ihr Code nie ausgeführt.
• Stellen Sie in einer Umgebung ohne Sandbox sicher, dass Sie entweder das obige JavaScript-Snippet aufrufen, nachdem die Seite geladen wurde, oder es ganz unten auf der Seite platzieren (vor dem schließenden body-Tag).

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

Answer 3

ich Ihre Geige aktualisiert https://jsfiddle.net/scf0ma4c/5/ wie Sie Ihren Code ein wenig weg war.

In reinen JavaScript, statt mit:

card.toggleClassName('flipped'); 

, die überhaupt nicht existieren sollten Sie verwenden:

+=card.className 

Wenn Sie jQuery:

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

Marken es ist einfacher.

Ich glaube, mit:

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

völlig zwecklos ist, da Sie die Flip auftreten auf klicken wollen, so dass ich entfernt es.

Überprüfen Sie die Geige für mehr dort.