javascript - jquery - this.each 没有执行

Question

我正在尝试通过为 jQuery 创建一个小插件来学习 CoffeeScript，该插件将移动一个 div 标签以将其保留在屏幕上。出于某种原因，我无法让“return this.each”正确运行。我已经尝试了 jQuery Plugin Authoring 页面中的基本结构，但仍然行不通。我需要做些什么才能让它发挥作用吗？

我使用 coffee-rails (3.2.1) 和 jquery-rails (2.0.1) gem 在 Ruby 1.9.3 和 Rails 3.2.2 上运行这个脚本。

CoffeeScript

$ = jQuery

defaults =
  paddingTop: 10


$.fn.fixedTop = (options) ->
    settings = $.extend defaults, options
    this.each () ->
      beginPoint = this.offset().top - settings.paddingTop
      $(window).scroll () ->
        scrollTop = $(window).scrollTop()
        if beginPoint < scrollTop
          $(this).css 'marginTop', (scrollTop-beginPoint)+settings.paddingTop

生成的 JS

(function() {
  var $, defaults;
  $ = jQuery;
  defaults = {
    paddingTop: 10
  };
  $.fn.fixedTop = function(options) {
    var settings;
    settings = $.extend(defaults, options);
    return this.each(function() {
      var beginPoint;
      beginPoint = this.offset().top - settings.paddingTop;
      return $(window).scroll(function() {
        var scrollTop;
        scrollTop = $(window).scrollTop();
        if (beginPoint < scrollTop) {
          return $(this).css('marginTop', (scrollTop - beginPoint) + settings.paddingTop);
        }
      });
    });
  };
}).call(this);

Answer 1

你这里有各种各样的问题。

我们将从添加一些行号开始:

1  $.fn.fixedTop = (options) ->
2    settings = $.extend defaults, options
3    this.each () ->
4      beginPoint = this.offset().top - settings.paddingTop
5      $(window).scroll () ->
6        scrollTop = $(window).scrollTop()
7        if beginPoint < scrollTop
8          $(this).css 'marginTop', (scrollTop-beginPoint)+settings.paddingTop

在第 4 行，this 不是支持 offset 的 jQuery 对象方法，它只是一个普通的旧 DOM 对象；您需要使用 $(this)(或者，因为我们在 CoffeeScript 领域，$(@))。

您在第 8 行还有另一个上下文问题:this 与您在第 4 行遇到的 this 不同，this this 是 window 因为在 window 上触发滚动事件。您可以通过缓存对适当对象的引用来解决此问题:

$el = $(@)
#...
$(window).scroll () ->
    # Use $el rather than $(@) in here

或使用 fat arrow将 $(window).scroll 回调绑定(bind)到您想要的上下文:

$(window).scroll () =>

您还应该在 CoffeeScript 中使用 @ 而不是 this。

当我们解决这些问题时，我们会遇到:

$.fn.fixedTop = (options) ->
  settings = $.extend defaults, options
  @each () ->
    $el = $(@)
    beginPoint = $el.offset().top - settings.paddingTop 
    $(window).scroll () -> 
      scrollTop = $(window).scrollTop() 
      if beginPoint < scrollTop 
        $el.css 'marginTop', (scrollTop - beginPoint) + settings.paddingTop

演示:http://jsfiddle.net/ambiguous/cmBYD/

或者这个:

$.fn.fixedTop = (options) ->
  settings = $.extend defaults, options
  @each () ->
    beginPoint = $(@).offset().top - settings.paddingTop 
    $(window).scroll () => 
      scrollTop = $(window).scrollTop() 
      if beginPoint < scrollTop 
        $(@).css 'marginTop', (scrollTop - beginPoint) + settings.paddingTop

演示:http://jsfiddle.net/ambiguous/JCbJj/

您会发现您仍然有一些错误，但您现在应该能够修复这些错误，因为您已经有了实际运行的东西。在开发和调试 (Java|Coffee)Script 时，您可能也想保持 JavaScript 控制台打开。

这里的主要教训是(咳咳)这个:每次你在 JavaScript 中引用 this 或在 CoffeeScript 中引用 @ 时，仔细检查你的代码是否正确运行上下文和三重检查是否涉及回调函数。