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