javascript - 使用 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');
}