Question

我很困惑将jQuery整合到它自己的文件中。我可以用jQuery做我需要的东西，但是我要么将每个函数放在它自己的.js.erb文件中，要么将它包含在.html.erb文件中，并用脚本标记包装。如果我试图将它们全部放在同一个文件中，我就无法让它工作。

每当用户点击链接时，我希望replaceWith()使用不同的div，具体到哪个链接。目前，我有每个链接指向一个不同的操作，每个链接都有自己独特的.js.erb文件 - 所以我有大约12个文件，每个文件只有一个jQuery链接 - 这有效，但看起来很乱。

示例链接如下：

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

和相关的jQuery（再次这是文件economic.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 can be found here!

感谢您的评论！

Answer 1

在黑暗中拍摄，因为我不熟悉Ruby，但根据我的理解，您可以将目标div ID添加到每个源div：

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

然后在主文件中有这个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并处理其点击事件。

Live test case

Answer 2

我不是jQuery专家，但总的来说，我喜欢将单个视图的所有javascript分成单个文件，而不是将它们包含在内。

我相信这是“Railsy”的方式。理想情况下，每个视图的JS文件。查看此博客的一些更一般的信息（http://xn--ncoder-9ua.dk/blog/2012/02/page-specific-javascript-in-rails-3/）

现在，当我这样做时，我也确保将JS包装在$(document.ready(function()...中，以确保脚本在pageload上运行。试试看，看看它是否适合你。

将jQuery卸载到自己的文件中

2 个答案: