jquery - CoffeeScript 中的多个函数作为参数

Question

这个问题已经有答案了:

How to pass two anonymous functions as arguments in CoffeScript? (4 个回答)

已关闭 9 年前。

我一生都无法解决这个问题，也无法在网上找到解决方案。我正在尝试弄清楚如何通过基于 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然后点击“尝试 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 中的这种方法，对我来说读起来更好。