3

jQueryを独自のファイルに統合することに混乱しています。jQuery で必要なことを実行できますが、各関数を独自の .js.erb ファイルに入れるか、スクリプト タグでラップして .html.erb ファイルにインラインで含めます。それらをすべて同じファイルに入れようとすると、機能しません。

ユーザーがリンクをクリックするたびに、それがどのリンクであるかに固有の別の方法が必要ですreplaceWith()。div現在、私は各リンクが異なるアクションを指しており、それぞれが独自の.js.erbファイルを持っているため、約12個のファイルがあり、それぞれにjQueryのリンクが1つしかありません.これは機能しますが、とても面倒です.

リンクの例は次のようになります。

<%= link_to({:action => 'economics'}, remote: true) do %><div id="department" class="economics">Economics</div><% end %>

関連付けられた jQuery (ここでも、economics.js.erb ファイル内の唯一の行です):

$('#target_div').replaceWith('<%= j render "economics" %>')

これを行うには、よりクリーンな方法が必要だと感じています。

以下のコメントのおかげでうまくいきました！これが一般的なコードです

HTML - データリモートが鍵でした!

<div id="render_form" data-target="target_div" data-remote="true"> economics </div>
<div id="render_form" data-target="target_div" data-remote="true"> other </div>
<hr />
<div id="target_div">Nil</div>

jQuery

$("div#render_form").click(function() {
    var targetId = $(this).data("target");
    var text = $(this).text();
    if (targetId.length > 0) {
        $(this).data("target");
        $('#' + targetId).text(text);
    }
});

jsFiddle はここにあります。

コメントありがとうございます！

4

2 に答える 2

3

私は Ruby に慣れていないので暗闇でのショットですが、私が理解していることから、各ソース div にターゲット div ID を追加できます。

<div id="department" class="economics" data-target="economics_target_div">

次に、メイン ファイルに次の 1 つの jQuery コード ブロックを含めます。

$(document).ready(function() {
    $("div[data-target]").click(function() {
        var targetId = $(this).data("target");
        if (targetId.length > 0) {
            //prevent replacing again:
            $(this).data("target", "");
            $('#' + targetId).replaceWith(this);
        }
    });
});

これは、上記のデータ属性を持つすべての DIV を反復処理し、クリック イベントを処理します。

ライブ テスト ケース。

于 2013-02-06T09:40:33.790 に答える
0

私は jQuery の専門家ではありませんが、一般的に、1 つのビューのすべての JavaScript をインラインで含めるよりも、1 つのファイルに分離するのが好きです。

これが「Railsy」の方法だと思います。理想的には、各ビューの JS ファイル。より一般的な情報については、このブログをご覧ください ( http://xn--ncoder-9ua.dk/blog/2012/02/page-specific-javascript-in-rails-3/ )

その際、JS をラップし$(document.ready(function()...て、スクリプトがページロード時に実行されるようにします。それを試して、それがうまくいくかどうかを確認してください。

于 2013-02-06T09:04:12.093 に答える