如何使每個頁面使用循環刷卡方法？

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

Answer 3

試試這個簡單的方法... 的$（document）。在（ 「swipeleft」， '＃' + event.target.id，函數（）{ VAR下一頁= $（本）的.next（ 'DIV [數據角色= 「網頁」]'）;如果 （nextpage.length> 0）{ 警報（nextpage.attr（ '編號'））; $ .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); 
        } 
       });