單擊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);

})();

這樣，兩個特定的按鈕就可以連接到翻轉和取消翻轉操作，因此卡僅在需要時翻轉。