javascript - jQuery 插件 : Do stuff to matched elements

Question

这是插件，以防有人觉得它有用。 http://silvestreh.github.io/onScreen/
再次感谢!

---

所以，我正在尝试编写我的第一个 jQuery 插件，并且我已经找到了我的第一个障碍。该插件应该在元素可见时对其执行某些操作(如在视口(viewport)区域，而不是 CSS 可见性)

这是插件的样子:

(function($) {
  $.fn.onScreen = function(options) {
    var self = $(this);

    params = $.extend({
      doIn: function(){
        console.log('on screen');
      },
      doOut: function(){
        console.log('off screen');
      },
      offset: 0
    }, options);

    return this.each(function() {
      var $el = $(this);
      var elTop = $el.offset().top;

      $(window).scroll(function() {
        var pos = $(window).scrollTop();

        if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
          params.doIn.call($el[0]);
        } else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
          if (typeof(params.doOut) == 'function') {
            params.doOut.call($el[0]);
          }
        }
      });
    });
  };
})(jQuery);

这就是我尝试使用它的方式:

$(function(){
  $('div').onScreen({
    doIn: function() {
      $(this).stop().animate({
        left: 20
      },500)
    },
    doOut: function() {
      $(this).stop().animate({
        left: 0
      },500)
    }
  });
});

问题是 $(this) 指的是 window 对象(因为插件中的 $(window).scroll())而不是匹配的元素。我究竟做错了什么？我如何告诉我的插件我想对匹配的元素做一些事情？

提前致谢:-)

编辑:我刚刚创建了一个 JSFiddle，您可以查看它。 http://jsfiddle.net/FBEFJ/3/编辑 2:bfavaretto 修复了代码。我用工作代码更新了问题。谢谢!

Answer 1

问题在于您如何在插件中调用 doIn 和 doOut。也许最简单的解决方案是使用 Function.prototype.call 强制执行 this 值:

if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
    params.doIn.call($el[0]);
} else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
    if (typeof(params.doOut) == 'function') {
        params.doOut.call($el[0]);
    }
}