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 Link