0

Vamos supor, clico no botão Mais e vou pra frente de A - Z.

Agora desejo voltar pra trás de Z - A clico no botão Menos.

Código:

var i = 0;    
var j = 0;
var n = 0;      

function prox(){
j++;
i += 20; 
barra = texto.split("|");
document.getElementById('lista').innerHTML = ' ';
for ( x = n; x < i; x++ ){
  if(barra[x]){
document.getElementById('lista').innerHTML += "<br>"+barra[x]+"<br>";
	}
}
if (j) {n = i}
}

function ante(){
j--;
i -= 20; 

barra = texto.split("|").reverse();
document.getElementById('lista').innerHTML = ' ';
for ( p = n; p > i; p-- ){
  if(barra[p]){
document.getElementById('lista').innerHTML += "<br>"+barra[p]+"<br>";
	}
}
if (j) {n = i}
}

texto = 

// clique 1 - listagem 1
"|A|"+
"|B|"+
"|C|"+
"|D|"+
"|E|"+

// clique 2 - listagem 2
"|F|"+
"|G|"+
"|H|"+
"|I|"+
"|J|"+

// clique 3 - listagem 3
"|K|"+
"|L|"+
"|M|"+
"|N|"+
"|O|"+

// clique 4 - listagem 4
"|P|"+
"|Q|"+
"|R|"+
"|S|"+
"|T|"+

// clique 5 - listagem 5
"|U|"+
"|V|"+
"|W|"+
"|X|"+
"|Y|"+
"|Z|";
<div id="lista"></div>

<hr color=silver size=1>

<a onclick="ante();">&#171 Menos</a>

&nbsp;
|
&nbsp;

<a onclick="prox();">Mais &#187</a> 

   


Só que, este botão Menos não está respondendo do modo correto!

1
  • 1
    Eu acho pode fazer fazer exatamente como fez a função prox(). Tudo igual mesmo exceto barra = texto.split("|").reverse();, isto é para manter
    – Miguel
    Commented 25/06/2016 às 0:30

2 Respostas 2

1

Agora fico mamão com açucar, ai se adapta pra sua necessidade, vê se serve...

<body onload="load();">
    <div>
	    <button type="button" id="volta" onclick="voltaPag()" value="volta" />&#171</button>
	    <button type="button" id="prox" onclick="proxPag()" value="prox" />&#187</button>
	    <div id="lista"></div>
    </div>
</body>
<script type="text/javascript">
    var lista = new Array("|A|","|B|","|C|","|D|","|E|","|F|","|G|","|H|","|I|","|J|","|K|","|L|","|M|","|N|","|O|","|P|","|Q|","|R|","|S|","|T|","|U|","|V|","|W|","|X|","|Y|","|Z|");
    var pagLista = new Array();
    var currentPage = 0;
    var numPorPag = 5;
    var numPag = 0;
    
    
function geraLista() {
	aLen = lista.length;
	text = "<ul>";
    for (x = 0; x < aLen; x++){
    text += "<li>" + lista[x] + "</li>";
}
text += "</ul>";
document.getElementById("lista").innerHTML = text;
numPag = getnumPag();
}

function getnumPag() {
    return Math.ceil(lista.length / numPorPag);
}

function proxPag() {
    currentPage += 1;
    loadLista();
}

function voltaPag() {
    currentPage -= 1;
    loadLista();
}

function loadLista() {
    var begin = ((currentPage - 1) * numPorPag);
    var end = begin + numPorPag;

    pagLista = lista.slice(begin, end);
    desList();
    check();
}
    
function desList() {
    document.getElementById("lista").innerHTML = "";
    for (r = 0; r < pagLista.length; r++) {
        document.getElementById("lista").innerHTML += pagLista[r] +"</br>";
    }
}

function check() {
    document.getElementById("prox").disabled = currentPage == numPag ? true : false;
    document.getElementById("volta").disabled = currentPage == 0 ? true : false;
}

function load() {
    geraLista();
    loadLista();
}
    

</script>

Se servir num esquece de validar a resposta... vlw ¯\_(ツ)_/¯

6
  • O que isso quer dizer?
    – MagicHat
    Commented 25/06/2016 às 3:50
  • Você quer que eu deixe igual ao seu com intervalos?
    – MagicHat
    Commented 25/06/2016 às 3:55
  • observe novamente fiz alteração de como estava o código antes de sua resposta. Atente p/ uma coisa que ele faz, é mostrar uma listagem de um certo grupo de itens e esses mesmos intens de A - Z são em sua formação decrescente, então o quê realmente busco, seria retroceder pra traz s/ qualquer modificação, em resumo, a posição das letras teria que permanece no mesmo lugar. Entendeu? Senão, comenta ai que tô vou ficar a noite toda aqui. Commented 25/06/2016 às 4:22
  • O que você quer é que a cada clique mostre 1 grupo na sequência de a-z, dividido em 5 grupos, e ao clicar para inverter, na verdade ele não vai inverter a ordem e sim retroceder os grupos que foram mostrados ? Ex: clicando em avançar ele mostra grupo 1, 2, 3, 4, 5, clicando em retroceder ele mostra 1,2,3,4 depois 1,2,3 depois 1,2 e depois 1 e depois nada é isso?
    – MagicHat
    Commented 25/06/2016 às 4:30
  • @DiegoHenriqueGuilherme Ninguém dormeeeee!!!!!! Falo fica com Deus!
    – MagicHat
    Commented 25/06/2016 às 6:09
0

Além da resposta de @MagicHat, dou outra similar.

Agora, aliado com comentário de @Miguel ao funcionamento do meu script, tive certeza que passado algum tempo sem abandonar código, resolveria o fundamento.

O jeito foi remover a linha barra = texto.split("|").reverse(); da função ante() e adicionar uma outra rotina de inversão. Confira:

Código

var i = 0;    
var j = 0;
var n = 0;      

function prox(){

j++;

i += 20; 

barra = texto.split("|");

document.getElementById('txt').innerHTML = ' ';

for ( x = n; x < i; x++ ){

  if(barra[x]){

document.getElementById('txt').innerHTML +=  "<br>"+barra[x]+"<br>";

	}
}

if (j) {n = i}

}

function ante(){

j--;

i -= 20; 

document.getElementById('txt').innerHTML = ' ';

for ( p = n; p > i; p-- ){

  if(barra[p]){

document.getElementById('txt').innerHTML += barra[p];

	}
}

if (j) {n = i}

}

texto = 

// clique 1 - listagem 1
"|A|"+
"|B|"+
"|C|"+
"|D|"+
"|E|"+

// clique 2 - listagem 2
"|F|"+
"|G|"+
"|H|"+
"|I|"+
"|J|"+

// clique 3 - listagem 3
"|K|"+
"|L|"+
"|M|"+
"|N|"+
"|O|"+

// clique 4 - listagem 4
"|P|"+
"|Q|"+
"|R|"+
"|S|"+
"|T|"+

// clique 5 - listagem 5
"|U|"+
"|V|"+
"|W|"+
"|X|"+
"|Y|"+
"|Z|";


/* Rotina que faz a inversão de Baixo pra Cima */

function troca() 
{
var listar = document.getElementById('txt');

listar.innerHTML = listar.innerHTML.split('').reverse().join(' ').replace(/\s/g, "<br><br>");
}
<span id='txt'></span>

<hr color=gray size=1>

<center>

<button onclick="ante();troca()"> Anterior</button>

&nbsp; | &nbsp;

<button onclick="prox();">Proximo</button>

</center>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .