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

保持代码运行有两件事：

默认情况下，JSFiddle在onLoad中运行JavaScript，这是在您等待的DOMContentLoaded事件之后，因此仅出于JSFiddle的目的删除它。
据我所知，在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/

Answer 2

以下代码段将解决您的问题。

找出错误

控制台和console.log是您的朋友。如果您在console.log('clicked me')事件中的代码中添加alert('hi')或click，则不会发生任何事情。因此，如果click事件没有触发，那么会出现什么问题？
删除DOMContentLoaded会使点击事件有效！（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');
  });
}

Answer 3

我更新了您的小提琴https://jsfiddle.net/scf0ma4c/5/，因为您的代码有点偏离。

在纯JavaScript中，而不是使用：

card.toggleClassName('flipped');

根本不存在你应该使用：

+=card.className

如果你使用jQuery：

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

让它更容易。

我相信使用：

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

是完全没用的，因为您希望翻转在点击时发生，所以我将其删除了。

在那里查看小提琴。

如何按下按钮按下div？

3 个答案: