2

現在、私の DOM には を含む 3 つの div がありdata-roll="page"、そのすべてに一意の ID があります。次のコードを使用すると動作しますが、jQuery Mobile は既存のノードに切り替えるのではなく、新しいノードを作成しています。

$('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        console.log(nextpage);
        $.mobile.changePage(nextpage.attr('id'), {transition: 'slide'});
    }
});

また、nextpage だけを.chagePageメソッドに渡そうとしましたが、ページに ID が設定されている場合は常に、次のエラーが発生します。

TypeError: b.split is not a function

そのため、swipeleft ハンドラーから新しいページを作成するのではなく、DOM にある既存の「ページ」に直接切り替えようとしています。

jQuery 1.7.1 と jQuery Mobile 1.1.1 を使用しています

4

1 に答える 1

2

文字列ではなく jQuery オブジェクトを渡してみましたか?

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
    if ($nextPage.length > 0) {
        $.mobile.changePage($nextPage, { transition: 'slide' });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    // swipe using id of next page if exists
    if ($prevPage .length > 0) {
        $.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
    }
});​

ここにデモがあります: http://jsfiddle.net/V3CXF/

それ以外の場合は、有効なセレクターにするために、文字列 ID の先頭にハッシュ マークを追加する必要があると思います。

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
    if ($nextPage.length > 0) {
        $.mobile.changePage('#' + $nextPage[0].id, { transition: 'slide' });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    // swipe using id of next page if exists
    if ($prevPage .length > 0) {
        $.mobile.changePage('#' + $prevPage[0].id, { transition: 'slide', reverse : true });
    }
});​

ここにデモがあります: http://jsfiddle.net/V3CXF/1/

.live()現在は減価償却されているため、交換したことに.delegate()注意してください.live（jQuery Core 1.7の時点）。jQuery Core 1.7 以降を使用している場合は、.on()代わりに使用できます。

のドキュメント.live(): http://api.jquery.com/live

于 2012-08-06T16:43:30.753 に答える