翻轉一個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應用內工作

回答

相關問題