编写jQuery更有说服力 - 结合逻辑

Writing jQuery more eloquenty - combining logic

本文关键字：结合 说服力 jQuery 编写      更新时间：2023-09-26

我写了一个简单的脚本，工作正常。

var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var uiscroll;
mywindow.scroll(function () {
uiscroll = mywindow.scrollTop();
if (uiscroll > mypos && !up) {
$('div').addClass('down');
    up = !up;
    console.log(up);
} else if(uiscroll < mypos && up) {
$('div').removeClass('down');
    up = !up;
}
mypos = uiscroll;
 if (mywindow.scrollTop() > 200) { 
  $('div').addClass('test');
}
else {
   $('div').removeClass('test');
}
});

该脚本根据滚动的三种不同条件将三种不同的 css 状态应用于div。 向上或向下以及滚动与顶部的距离。

困扰我的是，必须有比我拼凑的更好、更有说服力的写法。 不过，我只是无法完全理解它。

只是想学习更好地编写脚本，这样我整理的东西就不会那么可笑了。 我通过看例子学习得最好。

感谢任何帮助/指导。

这是我

的尝试

var mypos = 0;
var up = false;
var $div = $('div');
$(window).scroll(function () {
    var uiscroll = $(this).scrollTop();
    if (uiscroll > mypos && !up) {
        $div.addClass('down');
        up = !up;
    } else if(uiscroll < mypos && up) {
        $div.removeClass('down');
        up = !up;
    }
    mypos = uiscroll;
    $div.toggleClass('test',uiscroll>200);
});

我删除了mywindow变量，因为它不是必需的。 mypos可以用 0 初始化。

您可以使用 $(this) 引用滚动处理程序内的窗口。

与其告诉 jQuery 多次查找div，不如告诉它找到它一次并将其存储在 jquery 对象中。多次搜索同一元素实际上是非常昂贵/浪费的，尤其是在多次触发的滚动事件中。如果您需要多次引用同一元素，最好将其存储在变量中。

toggleClass('classname',boolean)

只是简写 

if(boolean is true)
    //add class
else
    //remove class

jsFiddle，所以你可以测试它

https://jsfiddle.net/guanzo/Ldp5b92s/

相关文章：