11548 sujets

JavaScript, DOM et API Web HTML5

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