上一个按钮无法正常工作 jquery 移动

Question

我是 jquery 移动设备的新手我正在尝试使用 jquery 移动设备创建应用程序我面临两个问题，如下所列，

我有 30 个问题。每页我显示 5 个问题。但是当我点击旁边的第 15 个问题，然后单击上一个将我转到第 2 到第 6 个问题。
如果我走到第 10 个 Q 并单击后退按钮，它会将我带到主屏幕然后我再次点击 HTML5 它应该带我到 1 st 5 Q 但它是回来和去的时候坚持我之前访问过的Q 再次转到同一个选项卡，它应该刷新并从开始显示 Divs

请帮助我，我试了这么多这里是例子

$(document).ready(function() {
var i=5;
    $("#html5 .collapsible").hide().slice( i-5, i ).show();
    var j = 20
$(".ui-block-b").click(function() {

    $('.ui-block-a input[type="button"]').removeAttr("disabled");
    $('.ui-btn').removeClass('ui-state-disabled');
$("#html5 .collapsible").hide().slice( j-15, j-10 ).show();
    j+=5;

if($('#html5 .collapsible:last').is(':visible')) {
        $('.ui-block-b input[type="button"]').attr("disabled","disabled");
        $('.ui-block-b .ui-btn').addClass('ui-state-disabled');
    }
});

$(".ui-block-a").click(function() {
var b = $("#html5 .collapsible:visible:last").index();
//alert(b);
  $('.ui-block-b input[type="button"]').removeAttr("disabled");
    $('.ui-btn').removeClass('ui-state-disabled');
if($('#html5 .collapsible:first').is(':visible')) {
        $('.ui-block-a input[type="button"]').attr("disabled","disabled");
        $('.ui-block-a .ui-btn').addClass('ui-state-disabled');
    } 
else{
$("#html5 .collapsible").hide().slice( b-9, b-4 ).show();
    b+=5;
}
});

});

Answer 1

您使用了多个变量来跟踪单击“上一个”和“下一个”按钮时的可见元素，相反，您可以只使用一个变量（在您的情况下为 i）并相应地增加/减少它。

为了解决您的第二个问题，我添加了 resetPage 函数，该函数将在页面加载和用户单击 HTML 按钮时调用。

使用i 来决定禁用上一个/下一个按钮。见下面的代码

$(document).ready(function() {

  var i=0;
  resetPage = function(){
      i=0;
      $("#html5 .collapsible").hide().slice( i, i+5 ).show();
      //disable previous button by default 
      $('.ui-block-a .ui-btn').addClass('ui-state-disabled');
      $('.ui-block-a .ui-btn input[type="button"]').attr('disabled');
  }

   //call it on page load    
   resetPage();

   //bind click event for html button
   $('.ui-content .ui-btn-up-c').click(function(){
      resetPage();    
   });


   $('.ui-block-b .ui-btn').click(function(e) {
        e.preventDefault();
        $('.ui-block-a .ui-btn').removeClass('ui-state-disabled');
        $('.ui-block-a .ui-btn input[type="button"]').removeAttr('disabled');
        i+=5;
        $("#html5 .collapsible").hide().slice( i, i+5 ).show();

        if(i==(j-5))
        {
            $('.ui-block-b .ui-btn').addClass('ui-state-disabled');
            $('.ui-block-b .ui-btn input[type="button"]').attr('disabled');
        }
    });

    $('.ui-block-a .ui-btn').click(function(e) {
    e.preventDefault();
     $('.ui-block-b .ui-btn').removeClass('ui-state-disabled');
     $('.ui-block-b .ui-btn input[type="button"]').removeAttr('disabled');

     i-=5;
     $("#html5 .collapsible").hide().slice( i, i+5 ).show();

     if(i==0)
     {
        $('.ui-block-a .ui-btn').addClass('ui-state-disabled');
        $('.ui-block-a .ui-btn input[type="button"]').attr('disabled');
      }
    });
});

JSFiddle Demo

上一个按钮无法正常工作 jquery 移动

Previous button not working properly jquery mobile

html

jquery

jquery-mobile