javascript - 如何在按下按钮时使 div 翻转？

Question

我试图在单击按钮后翻转 div，但它似乎无法正常工作，我也不知道为什么。我想知道是否有人能够指出正确的方向并纠正我的错误。

我的代码:

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 here .

谢谢。

Answer 1

有两件事使您的代码无法运行:

1. JSFiddle 默认在 onLoad 中运行 JavaScript，这是在您等待的 DOMContentLoaded 事件之后，因此出于 JSFiddle 的目的删除它仅。

2. 据我所知，原生 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/