使用 onclick 翻轉 div

Question

好的，對於業余狀態很抱歉，但我需要一點幫助。 我想要做的就是有一個 div(mian)，里面有 2 個 div（div-front），（div-back），當我點擊主 div 時，div-front 和 div back 旋轉。 然后當再次單擊主 div 時，它們會旋轉回來。

<div id="main"> <div id="front">Some text</div> <div id="back">Some other text</div> </div>

這就是我所指的設置。 我試過使用toggleClass，但我想我只是不太了解它。 任何幫助表示贊賞。 提前致謝。

Answer 1

您需要添加一個點擊監聽器。 單擊元素時，它將運行您定義的函數，這就是您調用toggleClassName

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

資料來源：

http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html
http://desandro.github.io/3dtransforms/js/flip-card.js

更多關於 javascript 中的事件監聽器：

developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

Answer 2

這是一個使用 JQuery 的非常直接的示例。

https://jsfiddle.net/james2doyle/qsQun/

<button onclick="flip()">flip the card</button>
<section class="container">
  <div class="card" onclick="flip()">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

和 JS

function flip() {
    $('.card').toggleClass('flipped');
}