1

私はここで初心者です。以下のように、すべてのページに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/

4

3 に答える 3

3

コード内で実際にループしているようには見えません。以下を試してください

//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 リンク

于 2013-03-28T02:34:36.200 に答える
1

この簡単な方法を試してください... $(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);
                    }
                });
于 2014-04-04T06:17:40.247 に答える
0

または、長いコードでそれを行う古い学校の方法:)

$(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');
    });
});
于 2013-03-28T05:51:52.747 に答える