javascript - 如何使用循环使每个页面都有滑动方法？

Question

我是这里的新手。我试图让每个页面都有一个 jQuery 移动网站的滑动方法，如下所示：

$("#page1").swipeleft(function () {
    $.mobile.changePage("#page2", {
        transition: "slide"
    });
});
$("#page2").swipeleft(function () {
    $.mobile.changePage("#page3", {
        transition: "slide"
    });
});

当我尝试制作这样的循环时，它不起作用。

var i = 1;
if(i <= 3;) {
    $("#page" + i).swipeleft(function () {
        $.mobile.changePage("#page" + (i + 1), {
            transition: "slide"
        });
    });
};

我的代码缺少什么？

更新：尝试了这段代码，但似乎不起作用

for (var i = 1; i<=3; i++) {
    $("#page"+i).swipeleft(function () {
        $.mobile.changePage("#page"+(i+1), {
            transition: "slide"
        });
    });
}

这是我的代码：http: //jsfiddle.net/lansinz/FHnp6/1/

Answer 1

您的代码中实际上似乎没有循环。尝试以下

//Create a loop for pages 1 to 3
for (var i = 1; i <= 3; i++) {
    //When page is 'swiped' call the nextPage() function
    $('#page' + i).on('swipeleft', nextPage);
}

function nextPage(event) {
    //Get the ID attribute of the element swiped
    var id = $(event.target).attr('id');
    //Get the number at the end of the elements ID (to work out the page number)
    var pageNo = parseInt(id.substr(4), 10);
    //Call the changePage function, increasing the page number by one
    $.mobile.changePage($('#page' + (pageNo + 1)), {
        transition: 'slide'
    });
}

jsFiddle 链接

Answer 2

试试这个简单的方法... $(document).on("swipeleft", '#'+event.target.id, function () { var nextpage = $(this).next('div[data-role=" page"]'); if (nextpage.length > 0) { alert(nextpage.attr('id')); $.mobile.changePage(nextpage, "slide", false, true); } });

                $(document).on("swiperight", '#'+event.target.id, function () {
                    var prevpage = $(this).prev('div[data-role="page"]');
                    if (prevpage.length > 0) {
                        $.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true);
                    }
                });

Answer 3

或者用冗长的代码来做这件事的老派方式:)

$(document).on('pageshow', '#page1', function(){
    $( "#page1" ).on( 'swipeleft', function(){
        $.mobile.changePage('#page2');
    });
});

$(document).on('pageshow', '#page2', function(){
    $( "#page2" ).on( 'swipeleft', function(){
        $.mobile.changePage('#page3');
    });

    $( "#page2" ).on( 'swiperight', function(){
        $.mobile.changePage('#page1');
    });
});

$(document).on('pageshow', '#page3', function(){
    $( "#page3" ).on( 'swiperight', function(){
        $.mobile.changePage('#page2');
    });
});