4

Criei um "dicionario" de A a Z , onde quando eu quiser ver o que tem na letra A , eu clico em cima dela. Tté ai beleza. Para que eu não tenha que clicar um por um para achar algum significado, gostaria de colocar uma função para expandir tudo de A a Z. Utilizei com o laço `for", porém não esta funcionando, já pesquisei e não acho nada. Eis o código:

function expandirTudo() {

    //Conta ao alfabeto de A a Z
    for (var ch = 'A';ch <= 'Z';ch++) {

        //Enquando tiver lista oculta (none), mostre a lista(block). 
        while(document.getElementById(ch).style.display == 'none'){ 
            document.getElementById(ch).style.display = 'block';                        
        }
        return ch;

    }

}
2
  • Não entendi direito. Você quer um botão para expandir tudo? Commented 6/02/2014 às 12:13
  • Você realmente não precisa fazer toda esta reviravolta para realizar um evento tão simples, veja como não é necessário nem saber das letras em minha resposta @Lucasolivier Commented 6/02/2014 às 12:45

4 Respostas 4

3

Coloque em todos os elementos do dicionário uma classe:

<div class="dic-item" id="A">...</div>
<div class="dic-item" id="B">...</div>
<div class="dic-item" id="C">...</div>
...
<div class="dic-item" id="Z">...</div>

Como você está usando jQuery, pode fazer assim:

$(".dic-item").show();
2
  • 1
    Realmente, muito mais prático que ficar iterando char Commented 6/02/2014 às 12:24
  • Só dei essa resposta sem usar javascript puro, pois entre as tags da pergunta, tem lá o jquery, o que torna tudo muito prático. Commented 6/02/2014 às 12:26
2

O problema é que você está tentando fazer um laço iterando entre letras e isso é impossível, tem que ser números.

Exemplo:

for (var idx='A'.charCodeAt(0), fim='Z'.charCodeAt(0); idx <= fim; ++idx) {
    var letra = String.fromCharCode(idx);
    document.getElementById(letra).style.display = 'block';
}

Explicação:

idx é o código ANSII da letra 'A' (65) e fim é o código ANSII da letra 'Z' (98), itera-se enquanto for menor ou igual para incluir a letra 'Z' no laço.

Como idx esta sendo somado a 1 a cada iteração, dentro do laço eu pego o caractere representado pelo código na tabela e devolvo a uma variável, que você pode utilizar neste caso como ID do seu elemento.

1
  • Galera, todas deram certo! Escolhi a do Gabriel porque foi a primeira que testei! Obrigadão a Todos :) Commented 6/02/2014 às 12:27
1

O problema é que o for não itera nos chars e sim apenas com número. Para fazer o que vc quer acredito ser mais fácil fazer assim:

function expandirTudo() {
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

    for (var i = 0;i <= letters.length; i++) {
        if(letters[i] && document.getElementById(letters[i]) !== null) {
            document.getElementById(letters[i]).style.display = 'block';
        }
    }
}

Com isso você cria um array com todas as letras e itera por ele.

1

Envolva a lista de letras que você tem, em uma <div> aplique um id à ela, (criei dois botões para exemplificar, um para mostrar outro para esconder):

<button onclick=mostraTodasLetras(true)>Mostrar Letras</button>
<button onclick=mostraTodasLetras(false)>Esconder Letras</button>
<div id=LetrasContainer>
    <div>A</div> 
    <div>B</div>
    <div>C</div>
    ...
</div>

E utilize esta função javascript mostrarTodasLetras():

function mostraTodasLetras(visiveis){
  var aryDivs = document.getElementById('LetrasContainer').getElementsByTagName('div');
  var len     = aryDivs.length;
  for (var i=0; i < len; i++){
    if (visiveis)
      aryDivs[i].style.display = 'block';
    else
      aryDivs[i].style.display = 'none';
  }
}

Note que:

mostrarTodasLetras(false) //esconde todas as letras
mostrarTodasLetras(true)  //mostra todas as letras

Aqui está um JSFiddle com tudo funcionando para você testar.

Eu recomendo essa solução acima em javascript pela performance, porém você tambem utilizar que seria:

HTML(o mesmo, igual, nem precisa mudar):

<button onclick=mostraTodasLetras(true)>Mostrar Letras</button>
<button onclick=mostraTodasLetras(false)>Esconder Letras</button>
<div id=LetrasContainer>
    <div>A</div> 
    <div>B</div>
    <div>C</div>
    ...
</div>

Javascript:

function mostraTodasLetras(visiveis){
  if (visiveis)
    $('#LetrasContainer').show();
  else
    $('#LetrasContainer').hide();
}

Claro, é muito mais simples em jQuery, porém JavaScript nativo não necessita o uso de plugins externos. é sempre bom.

2
  • Cara, Com seu exemplo da para usar até em outras situações, muito legal sua lógica. Parabéns pela explicação :D Commented 6/02/2014 às 13:04
  • Muito obrigado @Lucasolivier :) Disponha Commented 6/02/2014 às 13:07

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 .