2

各 div がページの 100% を占める単一ページの Web サイトを作成しました。

現時点では、ユーザーを一度に 1 つの 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');
    });

    }

ただし、これは応答がなく、まったくスクロールしません。このループの何が問題なのか誰か知っていますか?

4

4 に答える 4

3

.arrowどこに行くかを決定するロジックを持つリスナーを 1 つだけ持つ

(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

ポール S. は正しいです。あなたがしようとしたことは、複数のクリック ハンドラーを 1 つの.arrow要素に割り当てることでした。

Paul S. は、クロージャーから見えるようになり、クロージャーを呼び出すたびに変更さiれる変数を定義することを提案しています。function (e)

于 2013-06-21T14:29:32.763 に答える
0

Try Changing like this.Hope this works.

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 に答える