jQuery的移動更改爲下一個和以前的數據 - 角色=頁

Question

我在我的項目中與jquery移動工作，而我試圖做，而不是使用刷卡效果，使用兩個按鈕切換到下一個和以前的數據-role =頁。

IM與該JavaScript嘗試，但我不知道爲什麼不工作

THX的任何幫助。

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> 

等等........

的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()，兩個按鈕都將停止工作。

Demo

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