javascript 单击该 div 中的图像时，如何翻转该 Div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17831908/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I flip a Div when an image within that div is clicked?
提问by BoChiggedy
OK so I know very little about writing Javascript, I can edit it a little, and have dabbled a bit in CSS3 animations.
好吧，我对编写 Javascript 知之甚少，我可以对其进行一些编辑，并涉足 CSS3 动画。
I will give you an image of the sort of thing I am trying to achieve and then explain it below.
我会给你一个我试图实现的那种事情的图像，然后在下面解释它。
the website layout will be this: http://i.imgur.com/XyhaxNP.jpg
网站布局将是这样的：http: //i.imgur.com/XyhaxNP.jpg
I have found a few ways of doing it on Google but most of them seem to flip the div when the user hovers over the div, I need it to be on click event as it will also need to work on mobile.
我在谷歌上找到了几种方法，但是当用户将鼠标悬停在 div 上时，它们中的大多数似乎会翻转 div，我需要它在点击事件上，因为它也需要在移动设备上工作。
the third demo with the toggle button is what I was looking at, but that seems to not work when I add the event to an image.
带有切换按钮的第三个演示就是我所看到的，但是当我将事件添加到图像时，这似乎不起作用。
This is what I have so far, I have moved the onclick event to the image (it used to be on a button in the demo I found) but it doesnt work on the image.
这就是我到目前为止所拥有的，我已将 onclick 事件移动到图像（它曾经位于我发现的演示中的按钮上）但它不适用于图像。
HTML:
HTML：
<div class="flip-container">
<div class="flipper">
<div class="front">
<img class="teamlogo" onclick="document.querySelector('#flip-toggle').classList.toggle('flip');" src="images/logo/niners.png"/>
</div>
<div class="back">
Back of div content
</div>
</div>
</div>
CSS:
CSS：
.teamlogo{
padding-left: 5%;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
So at this current point, it flips when you hover over it, and I need it just to flip when you click on the image.
所以在当前点，当你将鼠标悬停在它上面时它会翻转，而我只需要它在你点击图像时翻转。
Here is a working demo: http://jsfiddle.net/wvveY/1/
这是一个工作演示：http: //jsfiddle.net/wvveY/1/
回答by Mark Vayngrib
Generally you want to keep JavaScript separate from the HTML, but if you want it inside the tag, then better put on the tag the code is referencing, i.e. the tag. This way any clicks inside that div, be it on the image or text, will trigger the flip.
通常，您希望将 JavaScript 与 HTML 分开，但如果您希望将它放在标签中，那么最好将代码放在代码所引用的标签上，即标签。这样，该 div 内的任何点击，无论是在图像还是文本上，都会触发翻转。
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
</div>
and then you have the CSS class:
然后你就有了 CSS 类：
.flipped {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
see it working here: http://jsfiddle.net/wvveY/4/
看到它在这里工作：http: //jsfiddle.net/wvveY/4/
回答by Grant Weiss
Make it .flip-container:activeinstead of .flip-container:hover
让它.flip-container:active代替.flip-container:hover
