Question

我是jquery mobile的新手我正在尝试使用jquery mobile创建应用程序我面临两个问题，如下所示，

我有30 Q.每页我显示5 Q.但当我点击旁边第15个Q然后点击上一个，它将我带到第2到第6个Q.
如果我去了第10个Q并点击后退按钮，它会将我带到主屏幕再次，我点击HTML5它应该把我带到第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 mobile

1 个答案: