jquery - CoffeScript 添加一个带有悬停的类

Question

我正在学习如何将 CoffeeScript 与 Ruby on Rails 一起使用。我有这个设置：

$ ->
  $this = $(this);
    $(".ind").hover(
  ->
      $this.addClass("hoverOver")
  ->
      $this.removeClass("hoverOver")
  );

我的css文件中有这个

.hoverOver {
  cursor:pointer;
  background-color:#fff;
}

但它不起作用？如果我将代码更改为测试：

$ ->
  $this = $(this);
    $(".ind").hover(
  ->
      alert("in")
  ->
      alert("out")
  );

这行得通，但我不明白为什么添加一个类不起作用？

score 2 · Accepted Answer

看起来您正在将您的类添加到文档中，而不是您悬停的元素。您将 $(this) 分配给名为 $this 的 var，然后附加悬停回调，但使用 $this 附加类（在悬停回调之外定义）。您可以将 $this 更改为 $(this)

score 2 · Accepted Answer

正如 Jason 提到的，您将类添加到文档而不是元素中。修复代码的一种方法是这样的：

$ ->
  ind = $('.ind').hover \
    (-> ind.addClass 'hoverOver'), \
    (-> ind.removeClass 'hoverOver')

我认为，这抓住了您的意图：缓存 jQuery 对象。但是，如果 class 有多个元素ind，则只要将其中任何一个悬停在上面，它就会执行所有这些元素。如果你不想这样，那么只需使用$(this)（或 CoffeeScript 的简洁且难以理解的缩写，$(@)）：

$ ->
  $('.ind').hover \
    (-> $(this).addClass 'hoverOver'), \
    (-> $(this).removeClass 'hoverOver')

score 2 · Accepted Answer

函数调用上的括号通常是可选的，但无论如何将它们放入可以使事情更清晰，更少噪音：

$('.ind').hover(
  -> $(@).addClass 'hoverOver'
  -> $(@).removeClass 'hoverOver'
)

你也可以命名你的回调，这在你的回调变大时特别有用：

hover   = -> $(@).addClass 'hoverOver'
unhover = -> $(@).removeClass 'hoverOver'
$('.ind').hover hover, unhover

或者只是去掉所有的噪音和使用toggleClass以及单参数形式hover：

$('.ind').hover -> $(@).toggleClass 'hoverOver'

我还在所有三种情况下都对目标元素进行了本地化，但icktoofay已经指出了这个问题。

3 回答 3