如何按下按钮按下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 .

谢谢.

Answer 1

有两件事导致您的代码无法运行：

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

2. toggleClassName据我所知，原生 JavaScript 中没有函数。相反，我将其更改为使用类列表进行切换。

这是固定且有效的代码。我缩短了盒子的高度，使其更适合演示盒子。

现场演示：

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/