jquery - this.each不執行

我想通過爲jQuery創建一個小插件來學習CoffeeScript，該插件將移動div標記以將其保留在屏幕上。出於某種原因，我無法使'return this.each'正常運行。我已經嘗試了jQuery插件創作頁面的基本結構，但仍然無法工作。有什麼特別的，我必須做的才能使這個工作？jquery - this.each不執行

我在Ruby 1.9.3和Rails 3.2.2上使用了咖啡欄（3.2.1）和jquery-rails（2.0.1）gems運行這個腳本。

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

來源

2012-03-18 Nick

內部回報似乎是多餘的。擦除它們，再試一次並告訴我會發生什麼。 – 2012-03-18 07:15:46

@elclanrs +1爲那個傢伙。 – Nemoy 2012-03-18 07:16:32

他們是由coffeescript自動生成的，我試圖刪除返回和代碼沒有運行。我在回報的這一邊放置了斷點，第一個被觸發，但第二個不是。 – Nick 2012-03-18 07:21:50

您在這裏有各種各樣的問題。

我們會加入一些行號開始：

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是不一樣的this你在4號線過了，這是this因爲window滾動事件被上window觸發。您可以通過緩存到相應的對象的引用解決這個問題：

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

或使用fat arrow到$(window).scroll回調到你想要的背景下結合：

$(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）腳本時保持JavaScript控制檯處於打開狀態。這裏的主要教訓是：（ahem）：每當您在JavaScript中引用this或在CoffeeScript中引用@時，請仔細檢查您的代碼是否在正確的上下文中運行，並三重檢查是否存在回調函數。

來源

2012-03-18 18:14:04

jquery - this.each不執行

回答

相關問題