Question

我不能为我的生活弄清楚这一点或在网上找到解决方案。我试图找出如何使用基于jQuery的JavaScript在CoffeeScript中编写脚本。

脚本是这样的：

jQuery('.post-thumb a').hover( function() {
    jQuery(this).find('.overlay').fadeIn(150);
}, function() {
    jQuery(this).find('.overlay').fadeOut(150);
});

我最初尝试过这样重写：

thumb_overlay =>
    $('.post-thumb a').hover
        => $(this).find('.overlay').fadeIn(150)
        ,=> $(this).find('.overlay').fadeOut(150)

但那没用，所以我想我会在这里发帖。那么如何在CoffeeScript中编写JavaScript？

Answer 1

我认为你几乎就在那里，但你需要一些括号（分组）和一些反斜杠来防止CoffeeScript误解新行。试试这个：

thumb_overlay =>
    $('.post-thumb a').hover \
        (=> $(this).find('.overlay').fadeIn(150)), \
        (=> $(this).find('.overlay').fadeOut(150))

你也可以将它们全部混合成一行但你可能会在几个月内后悔：

thumb_overlay =>
    $('.post-thumb a').hover (=> $(this).find('.overlay').fadeIn(150)), (=> $(this).find('.overlay').fadeOut(150))

然后顺便说一句，转到homepage并点击“Try CoffeeScript”，这是一种简单的方法来排除一小部分CoffeeScript;从->版本开始，以减少JavaScript中的噪音，然后在获得正确的JavaScript时切换到=>。

在这种情况下，我不确定您是否需要=>表单，->表单形式：

$('.post-thumb a').hover \
    (-> $(this).find('.overlay').fadeIn(150)), \
    (-> $(this).find('.overlay').fadeOut(150))

会为您提供您开始使用的JavaScript：

$('.post-thumb a').hover((function() {
  return $(this).find('.overlay').fadeIn(150);
}), (function() {
  return $(this).find('.overlay').fadeOut(150);
}));

如果你不喜欢反斜杠，你可以这样做：

$('.post-thumb a').hover( 
    -> $(this).find('.overlay').fadeIn(150)
    -> $(this).find('.overlay').fadeOut(150)
)

或者如果你的功能更长，你可以给他们起名字并跳过很多问题：

fadeIn  = -> $(this).find('.overlay').fadeIn(150)
fadeOut = -> $(this).find('.overlay').fadeOut(150)
$('.post-thumb a').hover(fadeIn, fadeOut)

我倾向于在JavaScript和CoffeeScript中使用这种方法，对我来说更好。

Answer 2

对于那些在2014年CoffeeScript中搜索答案的人，

$('someSelector').hover ->
  alert "hello"
, ->
  alert "world"

编译成

$('someSelector').hover(function() {
  return alert("hello");
}, function() {
  return alert("world");
});

多个函数作为CoffeeScript中的参数

2 个答案: