javascript - Jquery：使用相同全局变量的函数弄乱了我的代码

Question

基于这个 awnser：如何确定 jQuery 滚动事件的方向？

我做了这样的功能：

tempScrollTop=0;
$.fn.cool = function(options){
    windowTop = $(window).scrollTop(); 

    if (tempScrollTop < windowTop ){
        //scroll down
    }
    else if (tempScrollTop > windowTop ){
        //scroll up
    }

    tempScrollTop = windowTop;
};

但每次我尝试使用我的功能

 $(window).scroll(function(e) {
    $("#element1").cool();
    $("#element2").cool();
 }

$("#element2") 采用已由 $("#element1") 修改的全局变量 tempScrollTop 并且对于元素 2 tempScrollTop 和 windowTop 具有相同的值，因此我的函数不起作用。

关于我能做什么的任何想法？我不想为每个元素创建 n 个函数。

Answer 1

看来您真正想要做的是：

$("#element1","#element2").cool();

然后在你很酷的功能中：

tempScrollTop=0;
$.fn.cool = function(options){
windowTop = $(window).scrollTop(); 

if (tempScrollTop < windowTop ){
    //scroll down
    this.each(function() {
        // do stuff with each selected element $(this)
    });
}
else if (tempScrollTop > windowTop ){
    //scroll down
    this.each(function() {
        // do stuff with each selected element $(this)
    });
}

tempScrollTop = windowTop;
};

更多关于插件创作的信息在这里。

另一种方法是将滚动计算与元素上的操作分开：

$(window).scroll(function(e) {
    var scrollDiff=calculateScroll();
    $("#element1").cool(scrollDiff);
    $("#element2").cool(scrollDiff);
}

Answer 2

var tempScrollTop = 0,
    innerScrollTop;
    $.fn.cool = function(options){
        var $this = $(this);
        innerScrollTop = $this.data('scrollTop') || tempScrollTop;

        windowTop = $(window).scrollTop();

        if (innerScrollTop <= windowTop ){
            //scroll down
        } else {
            //scroll up
        }

        $this.data('scrollTop', windowTop);
    };