mostra/nascondi con controllo su classe

[james]

Ciao, premetto la mia totale ignoranza in js.

Sto cercando un modo per poter visualizzare o nascondere n elementi cliccando su due tag <a>.

Un utente mi ha postato uno script semplicissimo (che ho capito anche io ) che però si basa su id

<a onclick="document.getElementById('pippo').className = '';">Mostra</a> 

pippo è l'id di una riga di una tabella, la cui classe iniziale è 'nascosto', una classe che in css è invisibile, quindi cliccando sul tasto Mostra, in js si cambia la classe di pippo che magicamente appare. La tecnica è molto semplice, ma io dovrei nascondere o mostrare diversi elementi, non sempre dello stesso tipo di tag, quindi credevo esistesse una funzione js getElementByClass che mi avesse risolto il problema in un attimo, praticamente assegno a tutte le cose da nascondere la classe "nascosti" e automaticamente sono invisibili, poi clicco su "Mostra" e tutti gli elementi che hanno come classe "nascosti" appaiono, solo che in js non esiste un getElementByClass, ma ho trovato googlando questa funzione:

function getElementsByClass(searchClass,node,tag) {
  var classElements = new Array();
  if (node == null)
    node = document;
  if (tag == null)
    tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i = 0, j = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
} 

solo che:
1. ci capisco ben poco
2. questa mi dovebbe restituire una lista di elementi, ma in che senso? mi restituisce l'id di ciascun elemento che ha la classe che specifico? o cosa? Se uso questa fuzione al posto della getElementById ovviamente non funziona, non sapendo neanche cosa restituisce esattamente. Potreste farmi capire come coniugare le due cose?

[james]

up

[unbreakable9]

Ciao la funzione che hai trovato ti restituisce un array di oggetti il cui attributo class è impostato con una stringa comune che gli passi tramite parametro. In questo array poi per fare quello che dici tu basta un semplice ciclo for con una sola istruzione nel corpo che cambia la proprietà className.

Tuttavia secondo il mio modesto parere questa funzione è decisamente poco performante in quanto se hai oggetti eterogenei nella variabile els devi necessariamente document.getElementsByTagName(*) che non è esattamente il massimo in quanto a velocità!

Quindi sacrificando un po l'automatizzazione del processo di ricerca ti consiglio di prendere carta e penna e scriverti tutti gli id degli oggetti a cui vuoi applicare il toggle(cioè che vuoi nascondere col javascript) dopodichè ti crei un bell'array di stringhe che conterrà questi id e con un ciclo for da due soldi risolvi:

function nascondi(azione){
var default=new Array("classeDefault1",classeDefault2"...)
var id_elementi=new Array("primoID","secondoID",....);
for (var i=0;i<id_elementi.length;i++) {
var temp=document.getElementById(id_elementi[i]);
temp.className=(azione)?"nascondi":default[i];
}}

la funzione accetta un parametro booleano: se è true nasconde gli elementi impostando per ognuno il className a "nascondi" (ovviamente ci deve essere la regola css...) mentre se è false ripristina i valori di default (sempre che ce ne siano; se non ce ne sono metti una stringa vuota nella relativa posizione dell'array).

Questa funzione non è ne riusabile ne pratica però per quello ceh devi fare basta e avanza,l'unica difficoltà (se cosi si puo dire) sta nello stare attenti che gli array siano effettivamente paralleli. Ci sarebbero duemila modi di migliorarla, ma hai detto che non sei pratico di js!

[james]

Originariamente inviato da unbreakable9
Ciao la funzione che hai trovato ti restituisce un array di oggetti il cui attributo class è impostato con una stringa comune che gli passi tramite parametro. In questo array poi per fare quello che dici tu basta un semplice ciclo for con una sola istruzione nel corpo che cambia la proprietà className.

Tuttavia secondo il mio modesto parere questa funzione è decisamente poco performante in quanto se hai oggetti eterogenei nella variabile els devi necessariamente document.getElementsByTagName(*) che non è esattamente il massimo in quanto a velocità!

Quindi sacrificando un po l'automatizzazione del processo di ricerca ti consiglio di prendere carta e penna e scriverti tutti gli id degli oggetti a cui vuoi applicare il toggle(cioè che vuoi nascondere col javascript) dopodichè ti crei un bell'array di stringhe che conterrà questi id e con un ciclo for da due soldi risolvi:

function nascondi(azione){
var default=new Array("classeDefault1",classeDefault2"...)
var id_elementi=new Array("primoID","secondoID",....);
for (var i=0;i<id_elementi.length;i++) {
var temp=document.getElementById(id_elementi[i]);
temp.className=(azione)?"nascondi":default[i];
}}

la funzione accetta un parametro booleano: se è true nasconde gli elementi impostando per ognuno il className a "nascondi" (ovviamente ci deve essere la regola css...) mentre se è false ripristina i valori di default (sempre che ce ne siano; se non ce ne sono metti una stringa vuota nella relativa posizione dell'array).

Questa funzione non è ne riusabile ne pratica però per quello ceh devi fare basta e avanza,l'unica difficoltà (se cosi si puo dire) sta nello stare attenti che gli array siano effettivamente paralleli. Ci sarebbero duemila modi di migliorarla, ma hai detto che non sei pratico di js!

grazie mille, seguo la tua strada (almeno quello script lo capisco!)