jquery $(this) 无法在咖啡脚本/骨干中工作
我最近开始使用 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>
I recently started playing with Backbone and CoffeeScript using Brunch and was wondering why something like this...
events: {
"click .button" : "open",
"hover .info" : "hover"
},
hover: =>
$(this).css("background-color", "#333")
..does not work.
From my understanding CoffeeScript has its own version of this which could conflict with what jQuery uses but in the documentation I thought => binds it to the current object. I have also tried -> as well to no avail. Any idea on why this doesn't work?
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
来自文档：
如果
this是视图对象（而不是 HTML 元素），则$(this)毫无意义。我相信，您想要做的是传递视图引用的 元素$，例如：From the docs:
And if
thisis the view object (rather than, say, an HTML element),$(this)is fairly meaningless. What you want to do, I believe, is pass the element to which the view refers to$, e.g.:乔丹的答案在这方面是正确的 - 如果你想要视图的元素使用 this.el。
在您的情况下，您需要触发事件的元素，即 .info 元素。这可以通过 event.currentTarget1 检索
Jordan's answer is correct with respect to this - if you want the view's element use this.el.
In your case you want the element that triggered the event i.e. the .info element. This can be retrieved through event.currentTarget1
Jordan 和gingerhendrix 都是正确的，但让我退一步考虑一下
=>与->的更普遍的问题。毫无疑问，您已经看过/使用过诸如“
为什么这有效？” 之类的代码。好吧，在内部，jQuery 的悬停函数看起来像这样[显然，高度风格化]：
callback.call el, e就像调用callback(e)一样，只不过它使this指向该函数调用内部的el。这就是为什么$(this)为您提供了一个包裹着悬停事件所在元素的 jQuery 对象。但是，如果您这样写，这是行不通的，
因为
=>覆盖call和apply;它强制this始终表示相同的意思，无论函数如何调用。事情是这样的：Backbone 的
hover包裹了 jQuery 的hover，使得this无论如何都指向 View 实例...所以它实际上并没有根据您的情况，使用->还是=>并不重要。这就是为什么他们在文档$(this.el)一个>。这很棒，因为您几乎肯定希望在处理事件时访问视图的属性。正如gingerhendrix 指出的那样，this.el将为您提供整个 View 元素，而不是接收hover事件的特定元素；但事件对象e拥有您所需要的（以及更多）。有关绑定函数运算符的更多信息，查看我的书。
Jordan and gingerhendrix are both correct, but let me step back a moment to consider the more general question of
=>vs.->.You've no doubt seen/used code like
Why does this work? Well, internally, jQuery's hover function looks something like this [heavily stylized, obviously]:
callback.call el, eis just like callingcallback(e), except that it makesthispoint toelinside of that function call. So that's why$(this)gives you a jQuery object wrapped around the element that the hover event is on.But this wouldn't work if you wrote
because
=>overridescallandapply; it forcesthisto always mean the same thing, no matter how the function is called.Here's the thing: Backbone's
hoverwraps around jQuery'shoverin such a way thatthispoints to the View instance anyway... so it actually doesn't matter in your case whether you use->or=>. That's why they use$(this.el)in the docs. And that's great, because you'll almost certainly want to have access to the view's properties when handling events. As gingerhendrix pointed out,this.elis going to give you the overall View element, not the specific element receiving thehoverevent; but the event objectehas what you need (and so much more).For more on the bound function operator, check out my book.
好吧，$(this) 对我不起作用，所以我做了 $(event.target)。这肯定会起作用。
Well $(this) is not working me to so I did $(event.target). This will work for sure.
在使用 Coffee Script 时，我像这样编写 jQuery 调用：
我什至还没有费心去弄清楚它为什么有效，但它确实有效。
I write my jQuery calls like this when using Coffee Script:
I haven't even bothered figuring out why it works yet, but it does work.