多个函数作为CoffeeScript中的参数

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))

顺便说一句,转到主页并点击"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");
});