jQuery -- 为什么只执行第一个条件，或者如果第一个条件为 false，则根本不执行

jQuery -- Why is only the very first condition ever executed or none at all if the first condition is false?

本文关键字：第一个 条件 执行 false 如果 为什么 jQuery 或者      更新时间：2023-09-26

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

    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();});
这是因为当

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

你的函数混淆了。您希望所有滚动内容都在一个函数中，然后将单击处理程序绑定到该函数，并在 document.ready 上初始化它：

$(document).ready(function () {
    scroll();
    var dob = $('#dob');
    dob.click(function(){
        scroll();
    }
});
function scroll() {
    var one = $('#one');
    var two = $('#two');
    var thr = $('#thr');
    var fou = $('#fou');
    var fiv = $('#fiv');
    var scr = $(window).scrollTop();
    var win = $(window).height();
    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
        });
    };
}
相关文章：