HTML对象与jQuery对象

时间:2012-11-06 12:42:43

标签: javascript jquery ruby-on-rails coffeescript

我是CoffeeScript和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>

不可能更简单,对吧?现在是表单的视图:

<%= form_for(@note) do |f| %>
  <% if @note.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@note.errors.count, "error") %> prohibited this note from being saved:</h2>

      <ul>
      <% @note.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.text_area :body, class: 'tkh-editable' %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

在研究这个主题时,我看到很多程序员都遇到了jQuery加载两次或顺序错误的问题 以下是我的application.js清单文件中的非注释:

//= require jquery
//= require jquery_ujs
//= require tkh_editor/tkh_editor

在tkh_editor.js.coffee文件中,如果我只是输入此代码,它就可以正常工作:

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

它在我的textarea字段周围添加了一个边框与上面的类 我正在尝试创建一个插件,而我却陷入了第1步。

为什么以下代码不起作用?

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

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

Chrome控制台出现以下错误:

  

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

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

2 个答案:

答案 0 :(得分:5)

您可能只需要在jQuery中包装this。尝试更换:

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

使用:

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

答案 1 :(得分:2)

您在this函数内调用each,因此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(立即调用函数表达式),因此无法修改其参数。