使用 onclick 翻转 div答案

【问题标题】：Flipping div's with onclick使用 onclick 翻转 div
【发布时间】：2014-05-23 16:49:10
【问题描述】：

好的，对于业余身份，我很抱歉，但我需要一点帮助。我想要做的就是有一个 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，但我认为我只是不太了解它。任何帮助表示赞赏。提前致谢。

【问题讨论】：

desandro.github.io/3dtransforms/docs/card-flip.html
虽然这对实际制作div有参考意义，但没有提到要为其添加点击功能。点击功能是我需要了解的。感谢您的回复。
当然有。阅读页面，浏览示例，然后查看代码。这一切都在那里。当您似乎只是创建了三个 div 时，我们不会用勺子喂您答案。
+1 @j08691 用于根据 OP 的内容提取使用概念。

标签： javascript rotatetransform

【解决方案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

【讨论】：

感谢您实际阅读和理解问题。指导是我需要的，并且事件监听器链接有所帮助。再次感谢您能够理解问题，而不仅仅是随口回应。

【解决方案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');
}

【讨论】：

您的代码运行良好 (+1)。 . .对于一个图像，但是当与多个图像一起使用时，它们都会同时翻转，而不仅仅是单击的那个，我应该怎么做才能使您的代码单独处理每个图像？我的意思是，只翻转点击的图像而不是其他的。在此先感谢☻