Modification Id vers Class [résolu]

Question

csseur666

1 Dec 2007 à 06:26

Hello,

j'ai cette fonction:

function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('langue'+i)) {document.getElementById('langue'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

quand j'essaye de remplacer les getElementById par des getElementByClass, ça ne marche plus pourquoi?

C'est une fonctione que Koala64 m'avait fait voir, elle sert à afficher/masquer des divs, paragraphes.. et je voudrais rajouter pour quand c'est plusieurs divs à afficher en même temps.

++
Modifié par csseur666 (05 Dec 2007 - 13:17)

Heyoan

1 Dec 2007 à 08:44

Salut,

il faudrait éventuellement voir si la fonction getElementsByClass en question n'a pas de particularités puisqu'elle n'existe pas "en natif" mais de toutes façons elle retourne certainement un tableau de résultats et pas un seul élément comme getElementById : donc le traitement ne peut pas être le même Smiley cligne

...

A+

Edit: sinon, un petit test (supprimer les espaces de [ i ] et de [ div ])

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test Afficher / Masquer DIVs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
//    http://forum.alsacreations.com/topic-5-3716-2-Fonctions-methodes-class-et-scripts-utiles.html#p184867
 
function getElementsByClassName(className, tagName, root) {
	var els = (root || (root = document)).getElementsByTagName(tagName || (tagName = "*"));
	if (!els.length && root.all && tagName === "*") {
		els = root.all;
	}
	var res = [], re = new RegExp("(^|\\s)" + className + "(\\s|$)");
	for (var i = 0, el; (el = els[ i ]); ++i) {
		if (re.test(el.className)) {
			res[res.length] = el;
		}
	}
	return res;
}

function montre(quelleclass) {
for (var i = 1; i<=10; i++) {
	var divs = getElementsByClassName('classe'+i, "div");
	for (var div = 0; div < divs.length; div++){
		var oElement = divs[ div ]; 
		if (oElement) {oElement.style.display='none';}
	}
}

var divs = getElementsByClassName(quelleclass, "div");
	for (var div = 0; div < divs.length; div++){
		var oElement = divs[ div ]; 
		if (oElement) {oElement.style.display='block';}
	}
}

window.onload=montre;
//-->
</script>
<style type="text/css">
<!-- 
body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	background-color:#999999;
	width:100px;
}
ul#menu li a {
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
}
-->
</style>
</head>
<body>
<ul id="menu">
	<li onclick="montre('classe1');"><a href="#">Classe class1</a></li>
	<li onclick="montre('classe2');"><a href="#">Classe class2</a></li>
	<li onclick="montre('classe3');"><a href="#">Classe class3</a></li>
	<li onclick="montre('classe4');"><a href="#">Classe class4</a></li>
</ul>
<div id="contenu">
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe2">
		<p>div ayant une class:classe2</p>
	</div>
	<div class="classe3">
		<p>div ayant une class:classe3</p>
	</div>
	<div class="classe3">
		<p>div ayant une class:classe3</p>
	</div>
	<div class="classe4">
		<p>div ayant une class:classe4</p>
	</div>
	<div class="classe4">
		<p>div ayant une class:classe4</p>
	</div>
</div>
</body>
</html>

Modifié par Heyoan (01 Dec 2007 - 14:07)

csseur666

2 Dec 2007 à 19:26

merci beaucoup Smiley smile

mais comment faire pour que les divs en "classe1" soient affichés dès le début (et qu'ensuite si on clique pour afficher d'autres divs d'autres class, les "classe1" laissent leur place normalement) ?

++

Heyoan

2 Dec 2007 à 20:41

Re',

j'en profite pour faire une petite modif :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test Afficher / Masquer DIVs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
//     http://forum.alsacreations.com/topic-5-3716-2-Fonctions-methodes-class-et-scripts-utiles.html#p184867
 
function getElementsByClassName(className, tagName, root) {
	var els = (root || (root = document)).getElementsByTagName(tagName || (tagName = "*"));
	if (!els.length && root.all && tagName === "*") {
		els = root.all;
	}
	var res = [], re = new RegExp("(^|\\s)" + className + "(\\s|$)");
	for (var i = 0, el; (el = els[ i ]); ++i) {
		if (re.test(el.className)) {
			res[res.length] = el;
		}
	}
	return res;
}

function init() {
	// si les méthodes n'existent pas, on sort...
	if(!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}

	// Affichage ul#menu si Javascript activé
	document.getElementById("menu").style.position='relative';
	document.getElementById("menu").style.top='5px';
	
	montre('classe1');
}

function montre(quelleclass) {
	for (var i = 1; i<=10; i++) {
		var divs = getElementsByClassName('classe'+i, "div");
		for (var div = 0; div < divs.length; div++){
			var oElement = divs[ div ]; 
			if (oElement) {oElement.style.display='none';}
		}
	}
	var divs = getElementsByClassName(quelleclass, "div");
	for (var div = 0; div < divs.length; div++){
		var oElement = divs[ div ]; 
		if (oElement) {oElement.style.display='block';}
	}
}
window.onload=init;
//-->
</script>
<style type="text/css">
<!-- 
body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
}
ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#menu {
	background-color:#999999;
	width:100px;
	position:absolute;
	top:-5000px;
}
ul#menu li a {
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
}
-->
</style>
</head>
<body>
<ul id="menu">
	<li onclick="montre('classe1');"><a href="#">Classe class1</a></li>
	<li onclick="montre('classe2');"><a href="#">Classe class2</a></li>
	<li onclick="montre('classe3');"><a href="#">Classe class3</a></li>
	<li onclick="montre('classe4');"><a href="#">Classe class4</a></li>
</ul>
<div id="contenu">
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe2">
		<p>div ayant une class:classe2</p>
	</div>
	<div class="classe3">
		<p>div ayant une class:classe3</p>
	</div>
	<div class="classe3">
		<p>div ayant une class:classe3</p>
	</div>
	<div class="classe4">
		<p>div ayant une class:classe4</p>
	</div>
	<div class="classe4">
		<p>div ayant une class:classe4</p>
	</div>
</div>
</body>
</html>

Pour bien faire il faudrait complètement externaliser le JS... mais bon, à toi de voir Smiley langue

!

A+
Modifié par Heyoan (02 Dec 2007 - 20:47)

chmel

4 Dec 2007 à 00:55

Bonjour,
Je suis parti de ton exemple Heyoan, mais en jouant directement avec les règles de la feuille de style :
les règles 0 à 3 correspondants aux classes de mèmes indices. C'est plus simple et ça évite de passer par "onload". A améliorer par un pro du js Smiley cligne

J'expérimente par la mème occasion la bidouille de la class "JS" http://forum.alsacreations.com/topic-5-31123-1-Feuille-CSS-seulement-si-javascript-desactive.html#p233480 super simple et efficace, merci Gatsu35.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test Afficher / Masquer DIVs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
.JS .classe0{display:none}
.classe1{} /* seule class visible au départ sous JS */
.JS .classe2{display:none}
.JS .classe3{display:none}

#menu {display: none;}
.JS #menu {
	background-color:#999999;
	width:150px;
	display: block;
	position:relative;
	top:5px
}
ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul#menu li a {
	color: #000;
	text-decoration: none;
	display: block;
	border: 0 none;
}
</style>

<script type="text/javascript">
<!--
function changeRegle(num) {
  if (!document.styleSheets) return;
  if (document.styleSheets[0].cssRules) {regles=document.styleSheets[0].cssRules}
  else if (document.styleSheets[0].rules) {regles = document.styleSheets[0].rules}
  else return
	var e = regles[num ].style, i = 0;
	while ((a = arguments[++i])) {for (var p in a) {e[p] = a[p];}}
} 

document.documentElement.className+=" JS";
//-->
</script>

</head>
<body>
<ul id="menu">
	<li><a href="#" onclick="changeRegle('0',{display:'none'});">cacher class0</a></li>
	<li><a href="#" onclick="changeRegle('0',{display:''});">montrer class0</a></li>
	<li><a href="#" onclick="changeRegle('2',{display:'none'});">cacher class2</a></li>
	<li><a href="#" onclick="changeRegle('2',{display:''});">montrer class2</a></li>
	<li><a href="#" onclick="changeRegle('3',{display:'none'});">cacher class3</a></li>
	<li><a href="#" onclick="changeRegle('3',{display:'block'});">montrer class3</a></li>
	<li><a href="#" onclick="changeRegle('1',{color:'green', fontSize:'20px'});">couleur et taille class1</a></li>
	<li><a href="#" onclick="changeRegle('1',{display:'none'});">cacher class1</a></li>
	<li><a href="#" onclick="changeRegle('1',{color:'', fontSize:'', display:''});">Rétablir class1</a></li>
</ul>
<div id="contenu">
	<div class="classe0">
		<p>div ayant une class:classe0</p>
	</div>
	<div class="classe0">
		<p>div ayant une class:classe0</p>
	</div>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe2">
		<p>div ayant une class:classe2</p>
	</div>
		<p class="classe3">Paragraphe ayant une class:classe3</p>
	<div class="classe1">
		<p>div ayant une class:classe1</p>
	</div>
	<div class="classe3">
		<p>div ayant une class:classe3</p>
	</div>
</div>
</body>
</html>

Modifié par chmel (08 Dec 2007 - 16:23)

Heyoan

4 Dec 2007 à 12:12

Sympa comme technique Smiley cligne

...

csseur666

4 Dec 2007 à 18:37

merci à vous deux Smiley smile

chmel

5 Dec 2007 à 12:55

Bonjour csseur66,
Penses à éditer le titre pour ajouter résolu Smiley cligne

Sujet clos