Function to expand list

4

I created a "dictionary" from A to Z, where when I want to see what's in the letter A, I click on it. This is beauty. So I do not have to click one by one to find some meaning, I would like to put a function to expand everything from A to Z. I used with the 'for' loop, but it is not working, I already researched and I do not think anything. code:

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;

    }

}
    
asked by anonymous 06.02.2014 / 13:06

4 answers

2

The problem is that you are trying to make a loop iterating between letters and that is impossible, it has to be numbers.

Example:

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

Explanation:

idx is the ANSII code of the letter 'A' (65) and the end is the ANSII code of the letter 'Z' (98), iterate as long as it is less than or equal to include the letter 'Z' in the loop .

As idx is being added to 1 at each iteration, inside the loop I get the character represented by the code in the table and return it to a variable, which you can use in this case as your element ID.

    
06.02.2014 / 13:19
3

Put a class in every element of the dictionary:

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

As you are using jQuery, you can do this:

$(".dic-item").show();
    
06.02.2014 / 13:24
1

The problem is that for does not iterate in chars, but only with number. To do what you want, I think it's easier to do this:

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';
        }
    }
}

With this you create an array with all the letters and iterate through it.

    
06.02.2014 / 13:16
1

Involve the list of letters you have, in a <div> apply an id to it, (I created two buttons to illustrate, one to show another to hide):

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

And use this javascript function 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 that:

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

Here is a JSFiddle with everything working for you to test.

I recommend this above javascript solution for performance, however you also use would be:

HTML (same, same, do not need to change):

<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();
}

Of course, it's much simpler in jQuery, but native JavaScript does not require the use of external plugins. It's always good.

    
06.02.2014 / 13:43