Controllare elementi di una classe

**annalisa76** · 20-12-2005, 02:52

Salve, ho una pagina con vari layer div che hanno un loro id univoco, ma appartengono tutti alla stessa classe.

codice:

<div id="w1" class="small">contenuto</div>
<div id="b1" class="small">contenuto</div>
<div id="s3" class="small">contenuto</div>
etc etc...

Dovrei nasconderli sull'onClick di un bottone; finora (per un solo div) usavo la funzione:

codice:

<script language="javascript" type="text/javascript">
<!--
function mostra_nascondi(hid) {
var d = document.getElementById(hid).style.display;
if (d=='none') { d='block'; } else { d='none'; }
}
//-->
</script>
<input type="button" value="mostra/nascondi" onClick="mostra_nascondi('w1');">

Come si può accedere in JS a più elementi appartenenti alla stessa classe? Potrebbe andare bene il metodo document.getElementsByClass('classid')? Purtroppo non lo conosco, e visto che ne ho molti di quegli elementi mi sarebbe molto utile.
Grazie!

**Xinod** · 20-12-2005, 03:00

document.getElementsByClass non esiste nativamente,
qui una versione ben testata di un codice che ti permette di usarlo
http://www.robertnyman.com/2005/11/0...tsbyclassname/

ciao

**annalisa76** · 20-12-2005, 03:30

Grazie Xinod,
ho creato una bella soluzione:

codice:

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
/*
    Written by Jonathan Snook, http://www.snook.ca/jonathan
    Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && document.all)? document.all : 
	oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
	oElement = arrElements[i];      
	if(oRegExp.test(oElement.className)){
	arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}
function mostra_nascondi() {
var d = getElementsByClassName(document, "div", "small");
for (i=0; i<d.length; i++) { if (d[i].style.display=='none') { d[i].style.display='block'; } else { d[i].style.display='none'; } }
}
//-->
</script>
</head>
<body>
<div id="w1" class="small" style="display: none">contenuto1</div>
<div id="b1" class="small" style="display: block">contenuto2</div>
<div id="s3" class="small" style="display: block">contenuto3</div>
<input type="button" value="class hide" onClick="mostra_nascondi();">
</body>
</html>

Discussione: Controllare elementi di una classe

Strumenti discussione

Ricerca discussione

Visualizza

Controllare elementi di una classe

Fatto!

Permessi di invio