通过单击 div 上的按钮来翻转 div

【问题标题】：Flipping a div with the click of a button on the div通过单击 div 上的按钮来翻转 div
【发布时间】：2015-11-13 10:47:53
【问题描述】：

我正在尝试自学 HTML、CSS 和 JS，并开始在 codepen.io 上玩耍。当单击“创建帐户”或“提交”按钮时，我一直在尝试让 div（在这支笔上http://codepen.io/janicedarling/pen/MwNZVp）翻转。目前正在使用本教程http://callmenick.com/post/css-transitions-transforms-animations-flipping-card 单击任何位置时，我都可以使 div 翻转。我尝试在 javascript
document.querySelectorAll(".tab");
中更改它到
document.querySelector("#create");
但随后什么也没有发生。我将 CSS 留在原处。任何人都可以就如何获得所需的转换提供任何建议吗？

【问题讨论】：

标签： javascript html css

【解决方案1】：

首先，将id 添加到您的提交按钮：

    <input id="signup" type="submit" placeholder="Go">

接下来，让我们修复你的 JS。您不需要其他示例中的一堆代码来查找要连接的所有不同卡。在您的情况下，您只有一张卡片，并且只需要两个事件回调（一个用于翻转，另一个用于取消翻转）。我们在这里使用新的 id 来查找导致未翻转的特定按钮。

(function() {
  var tab = document.querySelector('.tab');

  document.getElementById('create').addEventListener('click', function() {
    tab.classList.add('flipped');
  }, false);

  document.getElementById('signup').addEventListener('click', function() {
    tab.classList.remove('flipped');
  }, false);

})();

有了这个，两个特定的按钮被连接到翻转和取消翻转动作，所以卡片只会在你想要的时候翻转。

【讨论】：