javascript - 单击 div 上的按钮即可翻转 div

Question

我正在尝试自学 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 保留在原处。谁能就如何实现所需的转型提供任何建议？

Answer 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);

})();

这样，两个特定的按钮将连接到翻转和非翻转操作，因此卡片仅在您需要时翻转。