5

私は RoR の一部は初めてで、jQuery はかなり初めてです。現在、私は学習プラットフォームとして機能する RoR サイトを持っています。学習を拡張するためにいくつかの jQuery の基本機能を含めたい (.mouseenter()、.hover()、.fadeIn() など)。

いくつかのコードでシーンを設定しましょう (短くするために一部を切り取っています)。

$ ruby -v
ruby 1.8.7 (2011-06-30 patchlevel 352) [i686-linux]
$ rails -v
Rails 3.2.8

Gemfile:

gem 'jquery-rails'

config/routes.rb:

root to: 'static_pages#home'

アプリ/コントローラー/static_pages_controller.rb:

def home
    @Presents = Present.all.reverse.take(20)
end

アプリ/ビュー/レイアウト/application.html.erb:

<!DOCTYPE html>
    <html>
        <head>
            <title>List</title>
            <%= stylesheet_link_tag    "application", :media => "all" %>
            <%= javascript_include_tag "application" %>
            <%= csrf_meta_tags %>
            <%= render 'layouts/shim' %>
        </head>
        <body>
            <div class="container-narrow">
                <%= render 'layouts/header' %>
                <%= yield %>
            </div>
        </body>
    </html>

アプリ/アセット/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

アプリ/ビュー/static_pages/home.html.erb:

<div class="jumbotron">
    <h1>Heading</h1>
</div>
<%= render 'shared/list' %>

アプリ/ビュー/共有/_list.html.erb:

<% if @Presents.any? %>
    <%= render partial: 'shared/list_item', collection: @Presents %>
<% end %>

アプリ/ビュー/共有/_list_item.html.erb:

<div id="present">
    <ul id="<%= list_item.id %>">
        <span class="content">
            Some content here
        </span>
</div>

<div>理想的には、jQueryで withを有効にしたいと考えていid="present"ます。これが私のテストjQueryです：

$(document).ready(function(){
    $('#present').mouseenter(function(){
        $(this).fadeIn('fast',1);
    }
    $('#present').mouseleave(function(){
        $(this).fadeIn('fast',0.5);
    }
});

現在、上記を保存app/views/static_pages/home.js.erbしていますが、何も起こりません。これは適切な場所ですか？または、app/views/shared/ディレクトリに移動する必要がありますか?

レンダリングされたサイト ページから - jQuery が含まれて実行されているかどうかを確認する方法はありますか? 現在のブロック ポイントは、home.js.erb の場所だと思います。

編集: jQuery で検出されたエラー - 以下に修正:

jQuery:

$(document).ready(function(){
    $('#present').mouseenter(function(){
        $(this).fadeTo('fast',1);
    });
    $('#present').mouseleave(function(){
        $(this).fadeTo('fast',0.5);
    });
});

の正しい使い方fadeTo。fadeIn私が試みていたように、不透明度の2番目の引数を受け入れません。

4

1 に答える 1

8

app/assets/javascripts/ビューが関連付けられているコントローラーにちなんでnamehome内にファイルを作成する必要があります。たとえば、次のような名前のコントローラーのapp/assets/javascripts/home.js場合、ファイル内にapplication.js次のようにアセットパイプラインに含めます。

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require home

ただし//=require tree .、上記の変更はapplication.js必要ないはずですが、上記のように実行し、JSを含めるタイミングをより細かく制御できるように、すべてのファイルを1つずつ含めることをお勧めします。

編集：また、この機能を再利用したい場合は、使用しているバインディングをIDからクラスに変更することをお勧めします。

JSが実行されているかどうかを確認するためのテスト目的で、次のようなものを追加できます。

$(document).ready(function(){
    $('#present').mouseenter(function(){
        alert("MouseEnter!"); // This will create an alert box
        console.log("MouseEnter!"); // This will log to the JS console on your browser which is a bit nicer to read than alerts, you do not need both, just preference
        $(this).fadeIn('fast',1);
    }
    $('#present').mouseleave(function(){
        alert("MouseLeave!"); // This will create an alert box
        console.log("MouseLeave!");
        $(this).fadeIn('fast',0.5);
    }
});

これはJSをすばやくテストするためだけのものであり、もちろんコードにこれらを残してはいけません。

また、JSをもう一度確認した後、次のようなものを試してみてください。

$(document).ready(function(){
    $('#present').mouseenter(function(){
        $(this).fadeIn('fast',1);
    }).mouseleave(function(){
        $(this).fadeIn('fast',0.5);
    });
});

クロージングに注意してください);

于 2013-01-17T02:42:28.843 に答える