你好,我是javascript/jquery程序员新手。我有一个带有div的页面,点击后我需要div向一个方向翻转,但这并没有发生。我在rails应用程序中完成所有这些。请帮忙。正如其他人发布的那样,它在小提琴上效果完美:[http://jsfiddle.net/nicooprat/GDdtS/][1] 我所做的只是将其应用到我的rails应用程序中,但没有任何结果。
这是我到目前为止的代码
在视图中:template.html.erb
<div class="flip">
<div class="card">
<div class="face front">
Front
<!-- I have an elaborate div here in this block -->
</div>
<div class="face back">
Back
<!-- I have a 1-1 mirror mapping of front div here in this block -->
</div>
</div>
</div>
<hr>
这是视图的关联css。事实上,所有这些都是在小提琴上完成的。只是不在我的rails应用程序中。
template.css.scss
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
最后是Javascript:template.js
$('.flip').click(function(){
alert("hello"); <-- never called.
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
尝试将代码包装到$(document).ready
块中。像这样:
$(document).ready(function(){
$('.flip').click(function(){
alert("hello"); <-- never called.
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
})