Sélectionner des éléments en fonction de leur classe et tags html

Soyez le premier à donner votre avis sur cette source.

Snippet vu 10 791 fois - Téléchargée 25 fois

Contenu du snippet

Voici une fonction javascript permettant d'afficher ou de masquer des éléments HTML d'une page en fonction de sa balise et de sa classe.

On utilisera le ciblage en fonction du Tag de la balise pour minimiser l'éxécution du script.

Source / Exemple :


<script>
/* fonction inArray, renvoie true si la valeur recherchée est dans le tableau*/
Array.prototype.inArray = function(array) {
	for(var i=0; i<this.length;i++) {
		if(this[i]==array){ return true;}
	}
	return false;
};
/* Fonction affichant et masquant un élément */
function ShowHide(element){
	if(element.style.display=='none'){
		element.style.display='';
	}else{
		element.style.display='none';
	}
}
/* fonction récupérant tous les éléments à afficher ou masquer 
Pour sélectionner tous les éléments html, passer '*' en paramètres
Vous pouvez sélectionner que les balises utiles pour minimiser l'exécution du script

  • /
function ShowHideClass(className, Tag){ var elts = document.getElementsByTagName(Tag); for (var j=0;j<elts.length;j++) { if (elts[j].getAttribute('class') && elts[j].getAttribute('class').split(' ').inArray(className)) { ShowHide(elts[j]); } } } </script> Voici comment afficher ou masquer plusieurs éléments d'une page en fonction de leur balise et de leur classe.<br /><br /> <div class="showonclick">Un autre texte...</div> <div class="showonclick">Un autre texte...</div> <div class="showonclick">Un autre texte...</div> <div class="showonclick">Un autre texte...</div> <a href="javascript:;" onclick="ShowHideClass('showonclick', 'div');">Démo</a> Mais on peut également afficher les éléments de formulaire Comme les champs textes <input type="checkbox" onClick="ShowHideClass('showonclick', 'input');" /> Démo <input class="showonclick" type="text" style="display:none; " /> ou tout autre type de champs <input type="checkbox" onClick="ShowHideClass('showonclick2', '*');" /> Démo <input class="showonclick2" type="radio" style="display:none; " /> <input class="showonclick2" type="checkbox" style="display:none; " /> <span class="showonclick2" style="display:none; ">Etc...</span> Vous remarquerez que j'affiche en fonction de la classe sans distinction de la balise en utilisant '*', mais qu'il aurait été préférable d'englober simplement tous les éléments dans <span class="showonclick2">Formulaire, texte etc...</span>

Conclusion :


Cette source surtout à montrer comment cibler des éléments HTML en fonction de leur classe et balise html plus que pour montrer comment afficher ou masque un élément.

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.