javascript - jQuery——为什么只有第一个条件被执行，或者如果第一个条件为假则根本不执行？

Question

我试图做的是有一个固定按钮，一旦单击，就会滚动到页面上的特定部分。然而，只有第一个条件被执行，而其他条件似乎被完全忽略，即使第一个条件为假。我在这里做错了什么？下面是代码。

    function scroll() {

        var dob = $('#dob');

        var one = $('#one');
        var two = $('#two');
        var thr = $('#thr');
        var fou = $('#fou');
        var fiv = $('#fiv');

        var scr = $(window).scrollTop();
        var win = $(window).height();

        dob.click(function(){

            if ( scr < win ) {
                    $('html, body').delay(125).animate({
                        'scrollTop' : two.offset().top
                    });
            }

            else if ( scr >= win && scr < (win * 2) ) {
                    $('html, body').delay(125).animate({
                        'scrollTop' : thr.offset().top
                    });
            }

            else if ( scr >= win * 2 && scr < (win * 3) ) {
                    $('html, body').delay(125).animate({
                        'scrollTop' : fou.offset().top
                    });
            }

            else if ( scr >= win * 3 && scr < (win * 4) ) {
                    $('html, body').delay(125).animate({
                        'scrollTop' : fiv.offset().top
                    });
            };

        });

    };

    $(document).ready(function(){scroll();});

Answer 1

这是因为当您的 scroll 函数在文档就绪时运行时，scr 和 win 的值仅设置一次。您可能希望在每次调用 click 时刷新它们。

所以正确的版本应该是:

function scroll() {
    var dob = $('#dob');
    var one = $('#one');
    var two = $('#two');
    var thr = $('#thr');
    var fou = $('#fou');
    var fiv = $('#fiv');
}


dob.click(function() {
    var scr = $(window).scrollTop();
    var win = $(window).height();

    if (scr < win) {
        $('html, body').delay(125).animate({
            'scrollTop': two.offset().top
        });
    } else if (scr < (win * 2)) {
        $('html, body').delay(125).animate({
            'scrollTop': thr.offset().top
        });
    } else if (scr < (win * 3)) {
        $('html, body').delay(125).animate({
            'scrollTop': fou.offset().top
        });
    } else if (scr < (win * 4)) {
        $('html, body').delay(125).animate({
            'scrollTop': fiv.offset().top
        });
    };

});

$(document).ready(function() {
    scroll();
});