HTML對象與jQuery對象

我是CoffeeScript和JavaScript的新手。HTML對象與jQuery對象

在這裏工作是一個空白的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控制檯使我有以下錯誤：

Uncaught TypeError: Object # has no method 'css'

請幫忙解釋一下我做錯了什麼。

來源

2012-11-06 allesklar

實際上，根據jquery的編寫指南http://docs.jquery.com/Plugins/Authoring一旦做對了，你的插件代碼中的'this'應該已經包裝在jQuery中了，所以你不必做大衛在他的答案中建議。問題在於，如何在coffescript中體現這一點。 – WTK

應發佈發送到頁面 – charlietfl

的結果源代碼@WTK這是需要封裝的'.each'回調中的'this'上下文。 – David

您可能只需要在jQuery中打包this。嘗試更換：

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

有：

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

來源

2012-11-06 12:45:09 David

賓果！非常感謝。一旦你知道解決方案，就會有意義。 ;-) – allesklar

確實，這是真的，因爲JQuery元素基本上是所有便利功能的包裝對象，例如.css（） – Vengarioth

要調用this的each函數內部，因此this不是一個jQuery對象。試試這個：如果你想使用$ jQuery的

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")

由於CoffeeScript的編譯器產生IIFE（立即調用函數表達式），你不能修改其參數。

來源

2012-11-06 12:49:37 Serabe

謝謝Serabe。大衛比你快一點，所以我會給他答案。 – allesklar

HTML對象與jQuery對象

回答

相關問題