2

我制作了一个单页网站，每个 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（.arrow），而不是让用户每次单击不同的 div（box1、box2 等）吗？

我已经尝试过了，用户单击.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');
    });

    }

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

4

4 回答 4

3

只有一个听众.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'
        );
    });
}());
于 2013-06-21T14:12:40.867 回答
1

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

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

于 2013-06-21T14:29:32.763 回答
0

尝试像这样改变。希望这有效。

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

    }
于 2013-06-21T14:11:41.960 回答
0

为什么不使用事件委托，而不是每个 div 都有一个点击处理程序？

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

这样，您将只有一个事件处理程序，并且该事件将携带您在目标上单击的 div。

于 2013-06-21T14:36:15.203 回答