Javascript 从原型迁移到jQuery（对于新手）

我使用的是RubyonRails3，我想使用jQuery而不是Prototype（这就是我现在使用的）。我读了很多书、指南和教程，但我仍然不明白我必须如何在代码中使用jQuery（也许没有人“真正”清楚这一点）。另外，我有很多使用Prototype编写的代码，因此我希望同时处理这两个问题，并“逐步”迁移到jQuery

我将jQuery文件包含在布局文件中，以使

出现在所有HTML页面的源代码中。为了避免

application.js

文件中出现错误，我在

application.js

文件中添加了

jQuery.noConflict（）

。现在，我必须做什么？

def edit
  ...
  respond_to do |format|
    format.html # render edit.html.erb
    format.js # render... what file?! where?!
  end
end

如果我在

application.js

文件中声明jQuery方法

jQuery(document).ready(function() {
    jQuery('#test_id2').click(function() {
      alert('Handler for .click() called.');
    });
})

我称之为使用

<%= link_to 'change1', '#', :id => 'test_id1' %>

使用Prototype，我可以直接在视图文件中编写代码，如下所示：

<%= link_to_function( "change", :id => 'test_id2' ) do |page|
  page[:test_id3].toggle
  ...
end %>

在

edit.html.erb

文件中

<%
jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})
%>

<%= link_to 'Test link', '#', :id => 'test_id1' %>

“测试\u id1%”>

但是当我单击上面的链接时，jQuery不起作用（不会触发警报方法）。此外，如果我尝试直接在视图文件中插入JavaScript代码，则会出现以下错误：

NameError: undefined local variable or method `document' for #<#<Class:0x00000102aa04d0>:0x00000102a75eb0>

NameError:未定义的局部变量或方法“document”#

有两种不同的东西

它们是常规脚本，您可以使用与jquery相同的方式加载它们： 您将它们放在

public/javascript

目录中，并将它们包含在

<%= javascript_include_tag YourNameFile %>

它将呈现

edit.js.erb

（您可以在

edit.html.erb

文件所在的目录中找到它）

然后可以在这些文件中添加jQuery和“ruby”（与原型完全相同）。 只需确保加载jQuery即可

如果我遗漏了什么，请添加评论。：）

==编辑===

在您的模板中，您必须仅在Rails函数周围放置

！！否则，它应该是Javascript。因此，您

edit.js.erb

应该如下所示：

jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})

---

有两种不同的东西

它们是常规脚本，您可以使用与jquery相同的方式加载它们： 您将它们放在

public/javascript

目录中，并将它们包含在

<%= javascript_include_tag YourNameFile %>

它将呈现

edit.js.erb

（您可以在

edit.html.erb

文件所在的目录中找到它）

然后可以在这些文件中添加jQuery和“ruby”（与原型完全相同）。 只需确保加载jQuery即可

如果我遗漏了什么，请添加评论。：）

==编辑===

在您的模板中，您必须仅在Rails函数周围放置

！！否则，它应该是Javascript。因此，您

edit.js.erb

应该如下所示：

jQuery(document).ready(function() {
    jQuery('#test_id1').click(function() {
      alert('Handler for .click() called.');
    });
})

---

您的文件应命名为*.js.erb并位于视图文件夹中（就像您的*.html.erb一样），它们的命名应与您命名的*.html.erb文件一样，即编辑操作的edit.js.erb。您可以在这些文件中编写ruby代码，就像在prototype（）中一样。使用jQuery时，您通常使用选择器。例如，如果您需要在某个

构造中替换页面上的某些html代码，您可以这样做（#在元素id很重要之前）：

$（“#someid”）.html（“”）

如果需要在某个元素后插入某些内容，请按如下方式执行：

$('<div>Some text</div>').insertAfter("#someid")

$（'Some text'）。插入后面（“#someid”）

---

依此类推。

您的文件应命名为*.js.erb，并位于视图文件夹中（与*.html.erb类似），它们的命名应与您命名*.html.erb文件的名称相同，即编辑操作的edit.js.erb。您可以在这些文件中编写ruby代码，就像在prototype（）中一样。使用jQuery时，您通常使用选择器。例如，如果您需要在某个

构造中替换页面上的某些html代码，您可以这样做（#在元素id很重要之前）：

$（“#someid”）.html（“”）

如果需要在某个元素后插入某些内容，请按如下方式执行：

$('<div>Some text</div>').insertAfter("#someid")

$（'Some text'）。插入后面（“#someid”）

---

等等。

使用Firefox的Firebug等工具，确保您的

jquery

和

edit.js

已加载。--查看我的编辑also@Lucas-在HTML“head”标记中，我只能看到加载的jquery库，但看不到edit.js。您是否删除了放错位置的

？使用Firefox的Firebug之类的工具，确保加载了

jquery

和

edit.js

查看我的编辑also@Lucas-在HTML“head”标记中，我只能看到加载的jquery库，但看不到edit.js。您是否删除了放错位置的

？我真的不明白您想做什么。如果您想在单击时调用alert，只需在js.erb中放置alert（'Clicked！'）。upd：哦，没关系。现在需要渲染“edit.js.erb”文件，但我想知道如何在视图文件中插入和使用一些内联jQuery代码。你能帮我吗？我真的不明白你想做什么。如果您想在单击时调用alert，只需在js.erb中放置alert（'Clicked！'）。upd：哦，没关系。现在需要渲染“edit.js.erb”文件，但我想知道如何在视图文件中插入和使用一些内联jQuery代码。你能帮我吗？现在我很难呈现“edit.js.erb”文件，但我想知道如何在视图文件中插入和使用一些内联jQuery代码。你能帮我吗？嗯，你不应该那样做。您应该将JS与HTML分开。如果你真的这么做了，谷歌它，你知道你的jQuery正在工作！现在需要渲染“edit.js.erb”文件，但我想知道如何在视图文件中插入和使用一些内联jQuery代码。你能帮我吗？嗯，你不应该那样做。您应该将JS与HTML分开。如果你真的这么做了，谷歌它，你知道你的jQuery正在工作！