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

Answer 2

试试这个简单的方法...... $（document）.on（＆＃34; swipeleft＆＃34;，＆＃39;＃＆＃39; + event.target.id，function（）{ var nextpage = $（this）.next（＆＃39; div [data-role =＆＃34; page＆＃34;]＆＃39;）; if（nextpage.length＆gt; 0）{ 警报（nextpage.attr（＆＃39;编号＆＃39;））; $ .mobile.changePage（nextpage，＆＃34; slide＆＃34;，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');
    });
});

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

3 个答案: