Question

我创建了一个单页网站，每个div占据了该页面的100％。

目前我有一些代码将用户放在页面上，一次一个div。

$(".box1").click(function(e){
    $('html, body').animate({scrollTop:$('.box2').offset().top }, 'slow');
});

$(".box2").click(function(e){
    $('html, body').animate({scrollTop:$('.box3').offset().top}, 'slow');
});

$(".box3").click(function(e){
    $('html, body').animate({scrollTop:$('.box4').offset().top}, 'slow');
});

$(".box4").click(function(e){
    $('html, body').animate({scrollTop:$('.box5').offset().top}, 'slow');
});

不是每次都让用户点击不同的div（box1，box2等），我是否可以让用户每次都点击相同的div（.arrow）？

我尝试过此操作，用户点击.arrow完成循环：

var boxes = ["box1", "box2", "box3", "box4"];

    for (i = 1; i > boxes.length; i++) {
        $(".arrow")click(function(e){
        $('html, body').animate({scrollTop:$(boxes[i]).offset().top}, 'slow');
    });

    }

然而，这没有反应，根本不会滚动。有没有人知道这个循环有什么问题？

Answer 1

.arrow上只有一个监听器，它有一些逻辑来决定去哪里

(function enableArrow() {
    var i = 1; // initial box
    $(".arrow").click(function (e) {
        i = i % 5 + 1; // (0 to 4) + 1 => 1 to 5
        $('html, body').animate(
            {scrollTop: $('.box'+i).offset().top},
            'slow'
        );
    });
}());

Answer 2

保罗S.是对的。您尝试做的是将多个点击处理程序分配给一个.arrow元素。

Paul S.建议定义一个i变量，该变量对于function (e)闭包是可见的，并且每次调用闭包时都会被修改。

Answer 3

尝试像这样改变。希望这可行。

var boxes = [".box1", ".box2", ".box3", ".box4"];

    for (i = 0; i < boxes.length; i++) {
        $(".arrow")click(function(e){
        $('html, body').animate({scrollTop:$(boxes[i]).offset().top}, 'slow');
    });

    }

Answer 4

为什么不使用事件委托呢？

而不是每个div都有一个点击处理程序

$(document).on('click', '.box', function(event) {
    $('html, body').animate({
        scrollTop: $(event.target).offset().top 
    }, 'slow');
});

这样你只会有一个事件处理程序，而且事件将带有你在目标上点击的div。

使用循环滚动div

4 个答案: