单击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);

})();

这样，两个特定的按钮就可以连接到翻转和取消翻转操作，因此卡仅在需要时翻转。