Предыдущая кнопка не работает должным образом JQuery мобильного

Question

Я новичок в JQuery мобильный Я пытаюсь создать приложение с JQuery мобильного Я сталкиваются две проблемы с этим, как указано ниже,

Fiddle

1. У меня есть 30 Q. на странице Я показываю 5 Q., но когда я нажимаю рядом с 15th Q, а затем нажимаю на предыдущее, меня берут со 2-го по 6-й Q.
2. Если я поеду до 10-го Q и нажмите кнопку «Назад», это займет у меня на главный экран после того, как я снова нажму на HTML5, мне потребуется 1 с т 5 Q, но это прилипание к Q, которую я посетил, прежде чем Так, возвращаясь и собирается снова же вкладке он должен получить обновления и шоу-дивы от начала

Pls помочь мне в этом я попытался это много здесь пример

$(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