我有一个JQM项目-一些页面有一个独立的左箭头和一个控制页面之间移动的右箭头-从第一个页面开始,然后点击右箭头移动到下一个页面,然后可能返回,然后向前等等,希望你能明白…
问题是:当网站加载,右箭头带你到下一页正常,然后当你再次点击右箭头,它跳过下一页,进入下一页后的页面。它有一个幻灯片图标,你可以看到下一页,但在我不碰它的情况下,它就会再次启动,并再次移动到下一页。
我也使用滑动手势来执行相同的功能,它们工作得很好。只需点击箭头就可以得到这个结果。
欢迎任何想法!!
JS:
$(document).bind('pagecreate', function (e) {
/Navigation for next/prev arrows
$(document).on('click', '.right-arrow', function () {
if ($.mobile.activePage.next('.page-container').length !== 0) {
var next = $.mobile.activePage.next('.page-container');
resetCasePages()
$.mobile.changePage(next, {
transition: 'slide'
});
}
event.stopImmediatePropagation();
});
$(document).on('click', '.left-arrow', function () {
if ($.mobile.activePage.prev('.page-container').length !== 0) {
var prev = $.mobile.activePage.prev('.page-container');
resetCasePages()
$.mobile.changePage(prev, {
transition: 'slide',
reverse: true
});
}
event.stopImmediatePropagation();
});
//Swipe to the right of screen (swipeleft)
$( ".page-container" ).on( "swipeleft", swipeHandler );
function swipeHandler( event ){
if ($.mobile.activePage.next('.page-container').length !== 0) {
var next = $.mobile.activePage.next('.page-container');
resetCasePages()
$.mobile.changePage(next, {
transition: 'slide'
});
}
event.stopImmediatePropagation();
}
//Swipe to the left of screen (swiperight)
$( ".page-container" ).on( "swiperight", swipeHandler2 );
function swipeHandler2( event ){
if ($.mobile.activePage.prev('.page-container').length !== 0) {
var prev = $.mobile.activePage.prev('.page-container');
resetCasePages()
$.mobile.changePage(prev, {
transition: 'slide',
reverse: true
});
}
event.stopImmediatePropagation();
}
});
});
//function to reset case pages on arrow
function resetCasePages() {
$('.rationale-box').hide();
$('.answer-yes').removeClass('correct-style');
$('.answer-yes').removeClass('incorrect-style');
$('.answer-no').removeClass('correct-style');
$('.answer-no').removeClass('incorrect-style');
$('.incorrect').removeClass('inhibit');
}
//function diagnosis pages
function diagnosisPages() {
$("#slider").slider('value',2);
}
尝试将event
作为参数添加到您的点击函数中,就像您在滑动侦听器上做的那样。
$(document).on('click', '.right-arrow', function (event) {
if ($.mobile.activePage.next('.page-container').length !== 0) {
var next = $.mobile.activePage.next('.page-container');
resetCasePages()
$.mobile.changePage(next, {
transition: 'slide'
});
}
event.stopImmediatePropagation();
});
$(document).on('click', '.left-arrow', function (event) {
if ($.mobile.activePage.prev('.page-container').length !== 0) {
var prev = $.mobile.activePage.prev('.page-container');
resetCasePages()
$.mobile.changePage(prev, {
transition: 'slide',
reverse: true
});
}
event.stopImmediatePropagation();
});