11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Masquer un élément lorsqu'un autre s'affiche

Bonjour, voilà un long long moment que j'essai diverses solutions. Je suis débutant en javascript.


Donc pour faire simple, j'ai dans ma page html une alternance de balise <p> et <div> :

<p onclick="affichediv('bloc1')">blablablalba</p>
<div class="masquer" id="bloc1">blablabla</div>
<p onclick="affichediv('bloc2')">blablablalba</p>
<div class="masquer" id="bloc2">blablabla</div>
etc...


Donc lorsque je clique sur le premier p, le bloc 1 s'affiche, et lorsque je clique sur second p, le bloc 2 s'affiche mais le bloc 1 reste affiché. Moi je souhaite qu'il soit à nouveau masqué.

j'ai utilisé cette fonction que j'ai trouvé sur le forum :

function affecterClassCss()
{
  //sélectionner tous les éléments ayant une classe donnée
  var oChilds = document.childNodes,
    iI = 0,
    iCount = oChilds.length;
    alert('longueur :'+iCount);

  for(iI; iI < iCount; iI++)
  {
      if(oChilds[iI].className === 'cacher')
      {
          // instruction commune à tous les éléments possédant la même classe
          this.style.display="block";
      }
  }
}


Mais cela me renvoi une erreur :
reference to undefined property oChilds[iI].className

De plus je ne comprends pas ce qu'est oChilds.

Merci de votre aide
Modifié par sylvainbucule (12 Aug 2007 - 10:46)
Modérateur
Salut,

oChilds, c'est à dire ici document.childNodes, représente tous les noeuds enfants de "document".

Pour ton script, tu peux, par exemple, procéder comme suit :
<!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>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	.cache { display: none; }
}

		--></style>
		<script type="text/javascript"><!--

var oO =
{
	/**
	 * oO.connect(oElem, sEvType, fn, bCapture)
	 * Affecte un gestionnaire d'événement lors d'un événement sur un élément
	 */
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},
	
	/**
	 * oO.aTag(oEl, sTag)
	 * Renvoie un tableau des éléments de tag sTag compris dans l'élément oEl
	 */
	aTag: function(oEl, sTag)
	{
		return oEl.getElementsByTagName(sTag);
	},
	
	/**
	 * oO.getSource(e)
	 * Renvoie la source d'un événement
	 */
	getSource: function(e)
	{
		return e.target || e.srcElement;
	},
	
	/**
	 * oO.cancelClick(e)
	 * Stoppe la propagation d'un événement et annule l'action par défaut d'un élément
	 */
	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault) // Pour les navigateurs DOM compliant
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event) // Pour IE
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false; // Pour éviter le bug de Safari
	},
	
	/**
	 * oO.ctrlDisplay(e)
	 * Cache toutes les 'div' excepté celle correspondant à la source
	 */
	ctrlDisplay: function(e)
	{
		var oSrc, oDiv, aDivs, iDiv;
		
		// Sélection de la source
		oSrc = oO.getSource(e);
		
		// Sélection de la 'div' correspondante
		oDiv = oSrc.parentNode.nextSibling;
		
		// Si la 'div' n'est pas un noeud de type élément, on passe au noeud suivant jusqu'à ce que ça le soit.
		while(oDiv && oDiv.nodeType != 1)
			oDiv = oDiv.nextSibling;

		// Sélection des 'div' du document
		aDivs = oO.aTag(document, 'div');
		iDiv = aDivs.length;
		
		do
			// Cache toutes les 'div' exceptée celle correspondant au lien de contrôle
			aDivs[--iDiv].className = (aDivs[iDiv] != oDiv) ?
				'cache':
				'';
		while(iDiv > 0);
		
		// On annule la propagation et l'action normale du lien
		return oO.cancelClick(e);
	},
	
	/**
	 * oO.init
	 * Chef d'orchestre du script
	 */
	init: function()
	{
		var aDivs, iDiv, aPs, iP;
		
		// Sélection des 'div' du documents
		aDivs = oO.aTag(document, 'div');
		iDiv = aDivs.length;
		
		do
			// Affectation de la classe 'cache' à chacune d'entre elles (exceptée la première)
			aDivs[--iDiv].className = 'cache';
		while(iDiv > 1);
		
		// Sélection des 'p' du document
		aPs = oO.aTag(document, 'p');
		iP = aPs.length;
		
		do
		{
			// Insertion d'un lien de contrôle pour chaque 'p' (pour avoir le contrôle au clavier)
			aPs[--iP].innerHTML = '<a href="#">' + aPs[iP].innerHTML + '</a>';
			
			// Gestionnaire d'affichage au clic sur chaque lien de contrôle
			oO.connect(
				aPs[iP],
				'click',
				oO.ctrlDisplay,
				false
			);
		}
		while(iP > 0);
	}
};

// Lancement du script au chargement de la page
oO.connect(window, 'load', oO.init, false);

		//--></script>
	</head>
	<body>

<p>blabla</p>
<div>blablabla</div>
<p>blabla</p>
<div>blablablabla</div>
<p>blabla</p>
<div>bla</div>

	</body>
</html>

Modifié par koala64 (12 Aug 2007 - 07:14)
Merci Koala64 pour ta réponse.

Devant l'absence de réponse, j'ai modifié ma page, je n'utiliserai donc pas ta solution dans l'immédiat mais je la garde sous le coude, elle ne devrait pas tarder à me servir.

Je marque donc le poste résolu (je te fais confiance Koala pour la solution apportée)

Encore merci à toi. Smiley biggrin
Sujet clos
Aller à