. toggleclass()方法的奇怪行为
Weird behavior of .toggleClass() method
本文关键字:方法 toggleclass 更新时间:2023-09-26
我有两个div元素(纸牌),我想执行翻转效果(使用css3)。问题是当用户点击div元素(即卡片)时,所有卡片都被翻转。我只想翻转被点击的div (card),而不是所有div。谁能告诉我哪里出了问题?
下面是jsFiddle的演示:
jsFiddle
下面是使用的代码:
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: /*Jquery is incuded */
$(".flipper").click(function(){
var id = $(this).attr("id");
document.getElementById(id).classList.toggle('flipped');
});
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;
}
应该能成功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');
});
尝试在你的JS中使用
$(".flipper").click(function(){
$(this).toggleClass('flipped');
});
和你的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>
也许你想要这样的东西http://jsfiddle.net/wvveY/67/
你需要把你的卡片分开,像这样:
<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>
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 数组在递归方法中设置为null
- 打破承诺链的好方法是什么
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 使用“;这个“;JavaScript原型方法中的关键字
- 序列化数据属性中对象的最可靠方法
- 使用Objective-C的JavaScript注入方法
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- jQuery/Javascript.toggleClass/.classList.toggle的特殊行为
- toBoolean方法类似于toString
- 如何在单击复选框后调用控制器方法
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 我如何用纯JavaScript取代jQuery的toggleClass方法
- jQuery方法未按预期工作-toggleClass
- 如何使用jquery cookie插件保存toggleClass方法的状态
- jQuery UI toggleClass方法不存在选项
- . toggleclass()方法的奇怪行为