11548 sujets

JavaScript, DOM et API Web HTML5

Résolu : Jquery afficher un élement div stocké dans un tableau

Bonjour

je débute avec jquery et bute sur une problème de gestion des tableaux.
j'ai une page html composée de la sorte :

<div id="1" class="texte">
texte 1
</div>
<span class="ctrl">
<a href="deplier1">cliquer</a>
</span>

<div id="2" class="texte">
texte 2
</div>
<span class="ctrl">
<a href="deplier2">cliquer</a>
</span>


avec jquery je souhaite cacher les textes au démarrage et les afficher celui qui correspond au lien cliqué
deplier1 doit afficher le texte1 etc..

J'ai donc fait ceci

var deplier = $('.ctrl a');
var descriptifs = $('.texte');
descriptifs.hide();

deplier.click(function(){
	 var descriptif_ID = $(this).attr('href');  //recuperation du n° de texte a afficher
	 descriptifs.hide();

// et la je bute sur la syntaxe pour accèder au bon div dans la variable [b]descriptifs[/b]
//Je voudrais que afficher  la partie de ma variable [b]descriptifs[/b] correspondant à [b]descriptif_ID[/b]

	return false;
});


Merci d'avance pour vos réponse.

François BILLARD
Modifié par BILLARD (24 Jun 2011 - 13:15)
Bonjour,

premièrement : tu n'utilises vraiment pas les bons attributs pour faire ce que tu désires... mettre un " deplierX " dans un href pour faire cela n'est vraiment pas la solution...

Tu as des plug-in jQuery qui te permettent de le faire facilement ( Accordion - la première démo est exactement ce que tu veux )

Sinon tu peux le faire sans plug-in, en utilisant soit l'attribut " class " de tes éléments, soit l'attribut " rel " de tes liens, mais utiliser le href n'est, pour moi, vraiment pas la bonne solution, sauf peut-être en y mettant une ancre.

Bref, utiliser le plug-in tout prêt qui est fait pour ça, si ce que tu veux est " afficher la chose " et non pas " construire toi même " la chose, sera la meilleure solution.
Merci pour le renseignement en effet j'ai pu avec les explications mettre en place une solution sans le plugin.
Mais je butte sur la mise à jour de l'image de plier/deplier.

ma structure est maintenant

<span class="ctrl_courrier">
<div id="courriers">
<div class="texte">mon texte</div>
<span class="ctrl_courrier">
<a href="#"><img src=".."></a>
</span>


et dans le jquery j'ai 

$('#courriers .ctrl_courrier').click(function() {
			if ($(this).prev().is(":visible")){
						$(this).prev().hide(); //cache l'éléments précédent
							$(this).next("a>img").attr("src","#CHEMIN{images/deplier_vert.png}");
			} else {
						$(this).prev().toggle(); //affiche l'éléments précédent
							$(this).next("a>img").attr("src","#CHEMIN{images/replier_vert.png}");
						};
			return false;
			})


qui fonctionne comme je le veux sauf que cette ligne ne me permet pas de changer mon image et je ne vois pas comment faire
$(this).next("a>img").attr("src","#CHEMIN{images/deplier_vert.png}");


merci

François BILLARD
Mise à jour de l'image résoluz à force de recherche avec ceci 

$(this).children().children().attr("src","#CHEMIN{images/replier_vert.png}");



merci

cordialement

François BILLARD
Sujet clos
Aller à