Javascript jquery移动更改到下一个和上一个数据角色=页面

我在我的项目中使用jquery mobile，而我试图做的是使用滑动效果，使用两个按钮切换到下一个和上一个data role=页面

我正在尝试使用这个javascript，但我不知道为什么它不起作用

谢谢你的帮助

HTML:

<div data-role="page" id="p1">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" id="goback" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" id="goforward" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

<div data-role="page" id="p2">
 <div data-role="header" data-theme="a" data-position="fixed" data-id="footer" data-fullscreen="true">                  
 <a href="#prvbutton" data-icon="arrow-l" style="margin-right:340px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Página Anterior</a>
<a href="#nextbutton" data-icon="arrow-r" style="margin-right:290px" class="ui-btn-right" data-inline="true" data-iconpos="notext" data-direction="reverse">Próxima Página</a>
</div>
<div data-role="content">
.....something......
</div>
</div>

$("#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
 });
});

---

您使用的选择器错误，您将

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

---

给出的答案是正确的，但是，您需要首先检查活动页面之前或之后是否存在现有页面。因为如果在

undefined

值上调用

$.mobile.changePage（）

，两个按钮都将停止工作

---

没有ID

nextbutton

或

prvbutton

，也没有更改HTML或JavaScript选择器。此外，我无法识别

prev

和

next

classes@Kilian：提示的thx。。。我已经为按钮添加了一个id，并更新了上面的代码。。。请看一看将其更改为此

$（文档）。在（'click'，'#goforward'，function（）…

是的…现在有相同的想法，我已经测试过..工作正常..谢谢帮助。。

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