点击切换div的显示效果

Question

好的，抱歉我是个业余的翻译者，但我需要一点帮助。我想做的就是在一个div（main）中有两个div（div-front），（div-back），当我点击主div时，div-front和div-back旋转。然后再次点击主div时它们会旋转回来。

这是我所参考的设置。我尝试使用toggleClass，但我认为我还没有足够的理解。任何帮助都将不胜感激。提前致谢。

一些文本

一些其他文本

- user3669714

---

http://desandro.github.io/3dtransforms/docs/card-flip.html - j08691

虽然这对于实际制作div很有帮助，但没有提到如何添加点击功能。我需要了解点击功能。谢谢您的回复。 - user3669714

当然有。阅读页面，浏览示例并查看代码。所有的都在那里。我们不会在你仅仅创建了三个div时就把答案喂给你。 - j08691

+1 @j08691 根据原帖内容提取使用概念。 - Sunny Patel

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

- zeitoon

---

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

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

- Ayo Adesina

---

你的代码对于一张图片运行得非常好（+1）……但是当用于多张图片时，它们都会同时翻转，而不仅仅是点击的那张，我该怎么办才能让你的代码逐个独立地处理每张图片？我的意思是，只翻转被点击的图片，而不是其他图片。提前感谢 ☻ - Jose Manuel Abarca Rodríguez