将jQuery卸载到自己的文件中

Offloading jQuery to its own file

本文关键字：文件 自己的 jQuery 卸载      更新时间：2023-09-26

我对将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（这也是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可以在这里找到！

谢谢你的评论！

我不熟悉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，并处理它们的点击事件。

实时测试用例。

我不是jQuery专家，但总的来说，我喜欢将单个视图的所有javascript分离到一个文件中，而不是内联。

我相信这是"Railsy"的方法。理想情况下，每个视图都有一个JS文件。查看此博客了解更多常规信息(http://xn--ncoder-9ua.dk/blog/2012/02/page-specific-javascript-in-rails-3/)

现在，当我这样做时，我还确保将JS封装在$(document.ready(function()...中，以确保脚本在页面加载时运行。试试看它是否对你有用。

相关文章：