[英]Weird behavior of .toggleClass() method
I have two div elements (cards) that I want to perform flip effect (using css3). 我有两个要执行翻转效果(使用css3)的div元素(卡)。 Problem is when user clicks on div element (ie card) all cards are flipped.
问题是,当用户单击div元素(即卡片)时,所有卡片都被翻转了。 I want to flip only div (card) that is clicked, not all divs.
我只想翻转被单击的div(卡片),而不是所有div。 Can someone told me where is problem?
有人可以告诉我问题在哪里吗?
Here is jsFiddle demo: 这是jsFiddle演示:
Here is code that is used: 这是使用的代码:
HTML: HTML:
<div class="flip-container">
<div class="flipper" id="flipper">
<div class="front">
</div>
<div class="back">
<img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
</div>
<div class="front">
</div>
<div class="back">
<img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
</div>
</div>
</div>
JavaScript: JavaScript:
/*Jquery is incuded */
$(".flipper").click(function(){
var id = $(this).attr("id");
document.getElementById(id).classList.toggle('flipped');
});
CSS: CSS:
/* entire container, keeps perspective */
.flip-container{
/*perspective*/
-webkit-perspective:1000;
-moz-perspective:1000;
-ms-perspective:1000;
-o-perspective:1000;
perspective:1000;
display: table;
margin: 0px auto;
width: auto;
}
/* flip the pane when hovered */
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.front, .back{
float: left;
width: 100px;
height: 120px;
margin: 5px;
padding: 5px;
border: 4px solid #EE872A;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
z-index:2;
background: #B1B1B1;
/*backface-visibility*/
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
position:relative;
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
z-index:3;
}
This should do the trick http://jsfiddle.net/wvveY/61/ 这应该可以解决问题http://jsfiddle.net/wvveY/61/
<div class="flip-container">
<div class="flipper">
<div class="front"></div>
<div class="back">
<img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
</div>
</div>
<div class="flipper">
<div class="front"></div>
<div class="back">
<img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
</div>
</div>
</div>
$(".flipper").click(function () {
$(this).toggleClass('flipped');
});
try using this in your JS 尝试在您的JS中使用它
$(".flipper").click(function(){
$(this).toggleClass('flipped');
});
Update and your HTML as follows: 更新和您的HTML,如下所示:
<div class="flipper">
<div class="front">
</div>
<div class="back">
<img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
</div>
</div>
<div class="flipper">
<div class="front">
</div>
<div class="back">
<img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
</div>
</div>
Maybe you want something like that http://jsfiddle.net/wvveY/67/ 也许您想要类似的东西http://jsfiddle.net/wvveY/67/
You need to separate your cards to like this: 您需要分开卡片才能这样:
<div class="flip-container">
<div class="flipper" >
<div class="front">
</div>
<div class="back">
<img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png">
</div>
</div>
<div class="flipper" >
<div class="front">
</div>
<div class="back">
<img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png">
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.