3

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

感谢您的评论！

4

2 回答 2

3

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

现场测试用例。

于 2013-02-06T09:40:33.790 回答
0

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

我相信这是做到这一点的“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 回答