11540 sujets

JavaScript, DOM et API Web HTML5

Ajouter une variable

Bonjour,

J'aimerai rajouter une variable à mon script, j'ai un peu de mal avec les semantiques encore et je nage complétement.

J'ai une liste ul li avec laquelle je peux faire sortir des elements là l'intérieur de ma page. Et j'ai également à l'intérieur de ma page une icone qui doit me faire sortir un seul de ces éléments. Et à chaque fois ces les deux qui sortent. J'ai bien compris que je dois rajouter une variable du style if, else mais je n'arrive pas.

Si quelque peut m'aider me donner une piste de travail.

Voici mon code

$(document).ready(function() {
 
	$(".show_hide").click(
		function() {
			// On récupère le numéro présent dans l'id du lien
			var idLien = $(this).attr("id").substring(4);
 
			$(".div"+idLien).slideToggle();
		}
	);
 
});




<div id="nav_general">
<ul>
       <li> <img src="images/recyclage.png" alt="recyclage" /></a>
       <li><img src="images/eau.png" alt="eau" /></li>
       <li><img src="images/energie.png" alt="energie" /></li>
       <li> <a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation.png" alt="eco-habitation" /></a>
              <div class='div1' style='display:none;'>
                      <div id="description_nord">
                              <div id="diapob"><img src="images/bruno.jpg" alt="bruno" /> </div>
                                    <div id="textedescription">
                                             <span class="titre">FRANCE-PARIS</span><br />
                                             <span class="soustitre">sss titre</span><br />
                                              <span class="texte">xoxo oxoxoxoxox oxo xo xoxox ooxoox oxoox ox ox xo xox xo</span>
                    </div>
               </div>
            <div class='div2' style='display:none;'>
                       <div id="description_burkina">
                            <div id="diapob"><img src="images/bruno.jpg" alt="bruno" /> </div>
                                    <div id="textedescription">
                                             <span class="titre">FRANCE-PARIS</span><br />
                                             <span class="soustitre">ss titre</span><br />
                                              <span class="texte">xoxo oxoxoxoxox oxo xo xoxox ooxoox oxoox ox ox xo xox xo</span></div>
</div>
 </li>
 </li>
</ul> 
</div>
<div id="burkina">
<a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation_p.png" /></a>
<div class='div2' style='display:none;'>
</div>
</div>

Modifié par ivanova (05 Nov 2012 - 11:35)
Salut,

J'ai rien compris.

Quand on clique sur eco-habitation tu souhaite afficher un soit #diapob soit #textedescription c'est ça ? Essaye d'être plus explicite ne parle pas d'élément mais plutôt d'id histoire qu'on sache de quelle balise tu parles.

Sinon ton code HTML n'est pas valide car un li ne peut avoir comme parent qu'un ul/ol. Je te conseil de partir d'abord sur des bonnes bases en validant ton code. Après tu pourras mettre une couche de js.

Bonne chance Smiley smile .
en faite quand je clique sur
<li> <a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation.png" alt="eco-habitation" /></a>

C'est le div dont l'ID est 'div1' et div2 qui apparaissent

et lorsque je clique sur <a href="#" class="show_hide" id="lien1"><img src="images/eco-habitation_p.png" /></a> j'aimerai que cela soit juste div1 qui sortent et non pas les 2.

Voila

Je vais regarde pour la validité.
Ah bon pourquoi je ne peut pas lui mettre n'importe quand en caché sur un li .
ivanova a écrit :
Ah bon pourquoi je ne peut pas lui mettre n'importe quand en caché sur un li .
gnié ?

Je pense qu'il serait plus judicieux de d'abord apprendre l'HTML avant de partir dans des interactions avec jquery.

Le b.a-ba de l'HTML c'est déjà de savoir qu'une ID est un identifiant unique. Dans ton HTML tu as deux #lien1. Donc forcément jquery ne sait pas trop quoi faire. Ton problème peut être très facilement résolu avec un code HTML correct (et donc des ID uniques).

PS : pour les portions de code d'exemple il existe la colorisation syntaxique n'hésite pas à t'en servir.
aie mon message précédent n'est pas passé.

Donc comme je disais j'ai compris la mega boulette que j'ai faite.

rectifié li par des div class mais j'ai quand même peur de me retrouver avec le meme problème.

Exemple :

Dans div class="menu" j'ai deux div id qui apparaissent là tout va bien . Après si je veux qu'un seul de ces éléments apparaissent en cliquant que div id "burkina".. c'est les deux qui sorte.

Suis je obligé de faire un système de superposition de div?
Si tu sélectionnes les éléments que tu souhaites affiché seulement par leurs ID ça devrait fonctionner. Genre :
// clique sur un lien et affiche les deux éléments
$('#lien1').click(function(e){
    $('#element1, #element2).slideToggle();
    // supprime le comportement par défaut du liens
    e.preventDefault()
});

// clique sur un autre lien et affiche que un élément sur deux
$('#lien2').click(function(e){
    $('#element1').slideToggle();
    e.preventDefault()
});
Tu vois l'genre ?
Si ça ne t'éclaire pas tu peux toujours nous redonner ton code corrigé et on verra ensemble ce qu'on peut faire.

En espérant t'avoir fournis une piste de recherche Smiley smile
Merci pour ton aide et suite à ce que tu m'as dit j'ai fait la refonte de mes div... Smiley smile

Et là je m'aperçois que l'effet que je veux faire ne marche plus car il est bloqué dans une div alors que ce que je veux c'est que celle ci apparaissent dans un autre endroit de ma page.

JE suis à la recherche d'un script maintenant je reviens dès que j'ai trouvé ce que je cherche.

Ce div est lié à un element dans un menu et à une puce dans la page. j'essaye de faire deux type de nav à l'interieur.
là je passe maintenant avec 3w a quelque details près en rapport avec ie 6 et 7

bon je suis entrain de bosser avec ce script



<script type="text/javascript"> 
 function toggle_visibility(id) {
	  var e = document.getElementById(id); 
	  if(e.style.display == 'block') 
	  e.style.display = 'none';
	 else e.style.display = 'block'; } 
   
   </script>


Car une fois rectifié par rapport au li l'effet que cela donnait n'etait pas du tout le voulu.

Je dois maintenant lui insérer la variable .


<div class="menuecohabition"><a href="#" onclick="toggle_visibility('description_nord,description_burkina');"><img src="images/eco-habitation.png" alt="eco-habitation"/> </a></div>


<div id="burkina"><a href="#" onclick="toggle_visibility('description_burkina');"><img src="images/eco-habitation_p.png" alt="burkina"/></a></div>


Dans le premier cas j'ai les deux qui s'ouvre et si clique sur burkina 1 seule.

Déjà est ce bon ?

MErci par avance
Modifié par ivanova (06 Nov 2012 - 15:19)
Sujet clos
Aller à