Question

我有以下脚本：

$(".a").click ->
    $("body").animatescroll({scrollSpeed:1500,easing:'easeInOutSine'})

$(".b").click ->
    $("#b").animatescroll({scrollSpeed:1500,easing:'easeInOutSine'})

$(".c").click ->
    $("#c").animatescroll({scrollSpeed:1500,easing:'easeInOutSine'})

$(".d").click ->
    $("#d").animatescroll({scrollSpeed:1500,easing:'easeInOutSine'})

我想这样做：

scroll = animatescroll({scrollSpeed:1500,easing:'easeInOutSine'})

$(".a").click ->
    $("body").scroll

$(".b").click ->
    $("#b").scroll

$(".c").click ->
    $("#c").scroll

$(".d").click ->
    $("#d").scroll

但它返回以下错误：animatescroll is not defined

Answer 1

它不起作用的原因是因为你定义的“scroll”函数是在变量中定义的，而“animatescroll”是一个jQuery插件方法。

您可以通过自己扩展jQuery对象来解决此问题：

$.fn.scroll = ->
    this.animatescroll({scrollSpeed:1500,easing:'easeInOutSine'})

$(".a").click ->
    $("body").scroll()

$(".b").click ->
    $("#b").scroll()

$(".c").click ->
    $("#c").scroll()

$(".d").click ->
    $("#d").scroll()

它应该工作。但是，我不建议这样做，因为您正在使用硬编码参数向jQuery对象添加方法，并且它可能会干扰您可能已添加的任何jQuery插件，这些插件已经向jQuery对象添加了“scroll”方法。

我宁愿解决你的问题的方法是为参数创建一个变量并继续使用animatescroll方法，如下所示：

scrollSettings = scrollSpeed:1500, easing:'easeInOutSine'

$(".a").click ->
    $("body").animatescroll scrollSettings

$(".b").click ->
    $("#b").animatescroll scrollSettings

$(".c").click ->
    $("#c").animatescroll scrollSettings

$(".d").click ->
    $("#d").animatescroll scrollSettings

Answer 2

你得到“animateScroll未定义”，因为它只被定义为jQuery对象（$）的属性。此外，您将scroll定义为调用animateScroll的结果，而不是将其自身称为animateScroll的函数。您可以这样定义：

scroll = ($targetEl) ->
    $targetEl.animateScroll({scrollSpeed:1500, easing:'easeInOutsine'})


$(".a").click ->
    scroll $("body")

$(".b").click ->
    scroll $("#b")

$(".c").click ->
    scroll $("#c")

$(".d").click ->
    scroll $("#d")

Answer 3

您可以通过在单独的函数中完成所有单击处理程序设置来进一步干掉它：

makeScroll = (clickSelector, scrollSelector) ->
  $(clickSelector).click -> 
    $(scrollSelector).animatescroll scrollSpeed: 1500, easing: 'easeInOutSine'

makeScroll ".a", "body"
makeScroll ".b", "#b"
makeScroll ".c", "#c"
makeScroll ".d", "#d"

如何在coffeescript中干？

3 个答案: