jquery mobile更改为下一个和上一个data-role = page

我在我的项目中使用jquery mobile而我尝试做的是使用滑动效果，使用两个按钮更改为下一个和上一个data-role =页面。

我尝试使用这个JavaScript，但我不知道为什么不工作

thx任何帮助。

HTML：

 
 Página Anterior Próxima Página 
 
 .....something...... 
 
 
 
 Página Anterior Próxima Página 
 
 .....something...... 
  

等等……..

使用Javascript：

 $("#nextbutton").on('click', '#goforward', function () { var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id; $.mobile.changePage(next, { transition: 'slide' }); }); // Previous page $("#prvbutton").on('click', '#goback', function () { var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id; $.mobile.changePage(prev, { transition: 'slide', reverse: true }); }); 

Answer 1

给出的答案是正确的，但是，首先需要检查活动页面之前或之后是否存在现有页面。 因为如果在undefined值上调用$.mobile.changePage() ，则两个按钮都将停止工作。

演示

 $(document).on('click', '#goforward', function () { if ($.mobile.activePage.next('.ui-page').length !== 0) { var next = $.mobile.activePage.next('.ui-page'); $.mobile.changePage(next, { transition: 'slide' }); } }); $(document).on('click', '#goback', function () { if ($.mobile.activePage.prev('.ui-page').length !== 0) { var prev = $.mobile.activePage.prev('.ui-page'); $.mobile.changePage(prev, { transition: 'slide', reverse: true }); } }); 

Answer 2

您使用的选择器是错误的，您将href与id混合。 更改您的选择器以匹配您的HTML代码。

 $(document).on('click', '#goforward', function () { var next = '#' + $.mobile.activePage.next('[data-role=page]')[0].id; $.mobile.changePage(next, { transition: 'slide' }); }); // Previous page $(document).on('click', '#goback', function () { var prev = '#' + $.mobile.activePage.prev('[data-role=page]')[0].id; $.mobile.changePage(prev, { transition: 'slide', reverse: true }); });