我是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'
请帮助解释我做错了什么。
答案 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(立即调用函数表达式),因此无法修改其参数。