如何在按钮按下时使一个div翻转？

Question

我将为您翻译以下内容，涉及到IT技术。需要注意的是，请保留HTML标签。

我正在尝试让一个

在按钮被点击后翻转，但似乎并没有正常工作，我无法弄清楚原因。我想知道是否有人能指引我正确的方向并纠正我的错误。

我的代码：

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener('click', function() {
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

.container {
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
}
#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
#card .front {
  background: red;
}
#card .back {
  background: blue;
  transform: rotateY(180deg);
}
#card.flipped {
  transform: rotateY(180deg);
}

<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>

<section id="options">
  <p>
    <button id="flip">Flip Card</button>
  </p>
</section>

你可以在这里找到一个JSFiddle：链接。

谢谢。

- junoprobelaunch

---

嘿@junoprobelaunch，如果你找到了适合自己的解决方案，请将答案标记为“已接受”，以帮助社区中的其他人。谢谢！^_^ - Titus

Answer 1

有两个原因导致你的代码无法运行：

1. JSFiddle默认在onLoad中运行JavaScript，而你正在等待DOMContentLoaded事件，所以仅针对JSFiddle，请删除它。

2. 据我所知，在vanilla JavaScript中没有toggleClassName函数。相反，我已经改为使用类列表进行切换。

这是修复并正常工作的代码。我已经缩短了框的高度，使其更适合演示框。

演示链接：

var card = document.getElementById('card');

document.getElementById('flip').addEventListener('click', function() {
    card.classList.toggle('flipped');
}, false);

.container {
  width: 200px;
  height: 100px;
  position: relative;
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  transform: rotateY( 180deg);
}

#card.flipped {
  transform: rotateY( 180deg);
}

<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>

<section id="options">
  <p>
    <button id="flip">Flip Card</button>
  </p>
</section>

JSFiddle版本：https://jsfiddle.net/dL9v1ozf/2/

这是一个JSFiddle链接，可以显示代码和运行结果。

- Maximillian Laumeister

Answer 2

以下代码片段可以解决你的问题。

找出问题所在

• 控制台和 console.log 是你的好朋友。如果你在 click 事件内添加 console.log('clicked me') 或者 alert('hi')，你会发现没有任何反应。那么如果 click 事件没有触发，是什么原因呢？
• 移除 DOMContentLoaded 后 click 事件就能正常工作了！(Fiddle). 如果你打开控制台，你会看到一个错误： Uncaught TypeError: card.toggleClassName is not a function。这是因为 toggleClassName 不是一个有效的方法名。
• 使用 classList.toggle() 方法代替 toggleClassName()
• 通过设置一些易于理解的变量名称（例如用 card 表示 #card 元素，用 flipBtn 表示 #flip 按钮）来简化代码。

工作演示：

(function() {
  var card = document.querySelector('#card');
  var flipBtn = document.querySelector('#flip');
  flipBtn.addEventListener('click', function() {
    card.classList.toggle('flipped');
  });
})();

.container {
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  color: white;
}

#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  transform: rotateY( 180deg);
}

#card.flipped {
  transform: rotateY( 180deg);
}

<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>

<section id="options">
  <p>
    <button id="flip">Flip Card</button>
  </p>
</section>

一些最后的想法

• 许多沙箱网站（如jsbin和jsfiddle）已经为您方便起见使用window.onload将所有JavaScript代码包装起来。
• 因此，如果你在沙盒中编写JS，请不要使用window.onload或DOMContentLoaded，因为它已经在浏览器到达你的代码时触发。因此，你的代码永远不会运行。
• 在非沙盒环境中，请确保在页面加载后调用上述JavaScript片段，或将其放在页面底部（在闭合body标签之前）。

window.onload = function() {
  var card = document.querySelector('#card');
  var flipBtn = document.querySelector('#flip');
  flipBtn.addEventListener('click', function() {
    card.classList.toggle('flipped');
  });
}

- Titus

Answer 3

我更新了你的fiddle https://jsfiddle.net/scf0ma4c/5/，因为你的代码有点问题。

在纯JavaScript中，不要使用：

card.toggleClassName('flipped');

如果根本不存在，你应该使用：

+=card.className

如果您使用jQuery：

$("#card").toggleClass("flipped");

使它更容易。

我相信使用：

window.addEventListener('DOMContentLoaded', init, false);

这是完全没有意义的，因为您希望在单击时发生翻转，所以我将其删除了。

请查看fiddle以获取更多信息。

- Angel Politis