jquery $(this) 在咖啡脚本/主干中不起作用

Question

我最近开始使用 Brunch 玩 Backbone 和 CoffeeScript，我想知道为什么会这样......

events: {
  "click .button" : "open",
  "hover .info"   : "hover"
},

hover: =>
  $(this).css("background-color", "#333")

..不起作用。

据我了解，CoffeeScript 有自己的 this 版本，它可能与 jQuery 使用的内容冲突，但在文档中我认为 => 将它绑定到当前对象。我也试过-> 也无济于事。知道为什么这不起作用吗？

HTML：

<div id='outer'> 
   <div class='.info'> <a href='google.com'> google </a> </div> 
   <div class='.info'> <a href='google.com'> google </a> </div> 
   <div class='.info'> <a href='google.com'> google </a> </div> 
</div>

Answer 1

我在使用 Coffee Script 时这样编写我的 jQuery 调用：

$ -> $('#entryBox').val "Placeholder text"

我什至还没有弄清楚它为什么有效，但它确实有效。

Answer 2

$(this) 对我不起作用，所以我做了 $(event.target)。这肯定会奏效。

Answer 3

Jordan 和gingerhendrix 都是正确的，但让我退后一步考虑=> 与-> 的更一般的问题。

你肯定见过/使用过类似的代码

$('#foo').hover ->
  $(this).css('background-color', '#333')

为什么会这样？好吧，在内部，jQuery 的悬停函数看起来像这样 [显然是高度风格化的]：

hover: (callback) ->
  for el in @
    el.onmouseenter = el.onmouseleave = (e) -> callback.call el, e

callback.call el, e 就像调用callback(e) 一样，只是它使this 指向该函数调用内部的el。这就是为什么$(this) 会为您提供一个包裹在悬停事件所在元素周围的 jQuery 对象。

但如果你写了这将不起作用

$('#foo').hover => ...

因为=> 覆盖 call 和apply;它强制 this 始终表示相同的意思，无论函数如何调用。

事情是这样的：Backbone 的 hover 环绕 jQuery 的 hover，因此 this 无论如何都指向 View 实例......所以在你的情况下，是否使用 -> 实际上并不重要或=>。这就是他们在the docs 中使用$(this.el) 的原因。这很好，因为您几乎肯定希望在处理事件时能够访问视图的属性。正如gingerhendrix 指出的那样，this.el 将为您提供整体 View 元素，而不是接收 hover 事件的特定元素；但是事件对象 e 有你需要的东西（还有更多）。

有关绑定函数运算符的更多信息，check out my book。

Answer 4

Jordan 对此的回答是正确的 - 如果您想要视图的元素，请使用 this.el。

在您的情况下，您需要触发事件的元素，即 .info 元素。这个可以通过event.currentTarget1检索到

hover: (e) =>
  $(e.currentTarget).css("background-color", "#333")

Answer 5

来自the docs：

所有附加的回调在传递给 jQuery 之前都绑定到视图，所以当回调被调用时，this 继续引用视图对象。

如果this 是视图对象（而不是HTML 元素），$(this) 就毫无意义。我相信你想要做的是传递视图引用$的元素，例如：

hover: =>
  $(this.el).css("background-color", "#333")
  # -----^