Javascript HTML对象与jQuery对象_Javascript_Jquery_Ruby On Rails_Coffeescript

Javascript HTML对象与jQuery对象

javascript jquery ruby-on-rails coffeescript

Javascript HTML对象与jQuery对象,javascript,jquery,ruby-on-rails,coffeescript,Javascript,Jquery,Ruby On Rails,Coffeescript,我是一个咖啡脚本和JavaScript新手这里使用的是空白的Rails 3.2.8应用程序。以下是直线布局代码： <!DOCTYPE html> <html> <head> <title>Editor</title> <%= stylesheet_link_tag "application", :media => "all" %> <%= csrf_meta_

我是一个咖啡脚本和JavaScript新手

这里使用的是空白的Rails 3.2.8应用程序。
以下是直线布局代码：

<!DOCTYPE html>
<html>
    <head>
      <title>Editor</title>
      <%= stylesheet_link_tag    "application", :media => "all" %>
      <%= csrf_meta_tags %>
    </head>
    <body>
        <%= yield %>
      <%= javascript_include_tag "application" %>
    </body>
</html>

在tkh_editor.js.coffee文件中，如果我只输入以下代码，它就可以正常工作：

jQuery ->
  $(".tkh-editable").css("border","solid 5px red")

它使用上面的类在我的textarea字段周围添加边框。
我正在尝试创建一个插件，但我被困在了第一步

为什么下面的代码不起作用

jQuery.fn.extend
  tkhEditor: ->
    return @each ->
      this.css("border","solid 5px red")

jQuery ->
  $(".tkh-editable").tkhEditor()

Chrome控制台显示以下错误：

未捕获的TypeError:对象#没有方法“css”

请帮助并解释我做错了什么。

您可能只需要在jQuery中包装

这个

。尝试替换：

this.css("border","solid 5px red")

与：

您正在

每个函数中调用this
，因此this
不是jQuery对象。试试这个：
jQuery.fn.extend
  tkhEditor: ->
    return @each ->
      jQuery(this).css("border","solid 5px red")

如果要对jQuery使用$
，请执行以下操作：
$ = jQuery
$.fn.extend
  tkhEditor: ->
    return @each ->
      $(this).css("border","solid 5px red")

因为coffeescript编译器生成一个IIFE（立即调用的函数表达式），您不能修改它的参数。
Bingo！谢谢。一旦知道了解决方案，就完全有意义了。；-）确切地说，这是正确的，因为JQuery元素基本上是包装器对象，具有所有方便的函数，如.css（）。事实上，根据JQuery创作指南，一旦做对了，插件代码中的这个
应该已经包装在JQuery中，这样你就不必按照David在回答中的建议去做了。问题是，如何在coffescript中反映这一点。您是否应该发布发送到的结果源代码page@WTK是中的这个上下文。每个回调都需要包装。@David哦，你说得对-我的错！谢谢你。大卫比你快一点，所以我会给他答案。
$(this).css("border","solid 5px red")

jQuery.fn.extend
  tkhEditor: ->
    return @each ->
      jQuery(this).css("border","solid 5px red")

$ = jQuery
$.fn.extend
  tkhEditor: ->
    return @each ->
      $(this).css("border","solid 5px red")