Question

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

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

我在我的css文件中有这个

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

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

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

这样可行，但我不明白为什么添加课程不起作用？

Answer 1

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

Answer 2

As Jason mentioned，您要将类添加到文档而不是元素。修复代码的一种方法是：

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

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

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

Answer 3

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

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

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

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

或者只是消除所有噪音并使用toggleClass和hover的单一参数形式：

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

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