JQM specifying swipe page change

问题

Trying to make a mobile webapp. Three of the pages namely article1,2,3 should transition from one another on swipe. Within each article page there should be links to other page that show up with a flip transition. I have managed to sort of make it work however the code I am using is causing the app to be able to swipe through all of my 'pages' while I wish to target only the 'article' pages for the swipe feature. I think mainly the JQ needs to be changed to go directly to specific pages, is this possible? The JQ i currently uses var nextpage = $.mobile.activePage.next('[data-role="page"]'); if i gave all article pages an id of 'article' how would i get it to target data-role="page" while also specifying pages with an ID of article only?

Article Page Example (to swipe to article 2 and 3):

<div data-role="page" id="article1">

<div data-role="content">

  <a href="#pagetwo" data-transition="flip"><div style="width:50px; height: 50px; background-color:blue;"></div></a>


<a href="#pagethree" data-transition="flip"><div style="width:50px; height: 50px; background-color:blue; float: right;"></div></a>


</div>

Example page (link lies within one of the article pages and flips):

<div data-role="page" id="pagethree">
<div data-role="header">
<h1>Welcome To pagethree</h1>
</div>

<div data-role="main" class="ui-content">
<p>Click on the link to go back. <b>Note</b>: fade is default.</p>
<a href="#article1" data-transition="flip" data-direction="reverse">Go back to Page One</a>
</div>

JQ:

<script>

$(document).on('swipeleft', '.ui-page', function(event){    
if(event.handled !== true) // This will prevent event triggering more then once
{    
    var nextpage = $.mobile.activePage.next('[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
    }
    event.handled = true;
}
return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
if(event.handled !== true) // This will prevent event triggering more then once
{      
    var prevpage = $(this).prev('[data-role="page"]');
    if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
    }
    event.handled = true;
}
return false;            
});


</script>

回答1:

I am an idiot. I simply replaced var nextpage = $.mobile.activePage.next('[data-role="page"]'); with var nextpage = $.mobile.activePage.next('#article');

来源：https://stackoverflow.com/questions/31679350/jqm-specifying-swipe-page-change

标签

javascript

jquery

html

jquery-mobile