翻转一个div，只是不能在rails应用内工作

你好，我是一个新手的javascript/jquery程序员。我有一个网页与一个div和点击我需要该div翻转在一个方向，而它没有发生。我在一个Rails应用程序中完成了所有这些工作。请帮忙。它可以在其他人发布的小提琴上完美地工作：[http://jsfiddle.net/nicooprat/GDdtS/][1]我所做的就是将其适用于我的导轨应用程序，但没有任何结果。翻转一个div，只是不能在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; 
    });

来源

2014-09-30 user2511030

是否确定正确的CSS和JS文件包含在页面中？ – Phil 2014-09-30 20:50:30

菲尔，如果我删除所有的JavaScript代码，只是留下警报（“你好”）它正确执行。这就是为什么我很困惑。 – user2511030 2014-09-30 20:52:32

好吧，我想通了。它的错误$（document）.ready（function（） { } – user2511030 2014-09-30 20:54:01

尝试来包装你的代码$(document).ready块。像这样：

$(document).ready(function(){ 
    $('.flip').click(function(){ 
     alert("hello"); <-- never called. 
     $(this).find('.card').addClass('flipped').mouseleave(function(){ 
      $(this).removeClass('flipped'); 
     }); 
     return false; 
    }); 
})

来源

2014-09-30 20:52:57 Phil

感谢菲尔！我接受这个答案。在rails应用程序内部 – user2511030 2014-09-30 21:02:52

仅仅因为你希望这个js在页面加载后执行，如果你没有把文档准备好，它会在页面加载之前执行并且没有找到$（“。flip”）元素 – Phil 2014-09-30 21:07:34

翻转一个div，只是不能在rails应用内工作

回答

相关问题