Besoin d'aide pour cibler un element en javascript

Question

plume21

12 Feb 2013 à 16:05

Bonjour à tous,
Le javascript est un peu nouveau pour moi et sur cette fonction je ne trouve pas la solution
Donc au sein d'un système d'accordéon il s'agit de pouvoir cibler 2 éléments <span>

1 <span class:"+ d'info"> et <span class:"- d'info"> eux même dans une balise "a"

Etat 1 : l'accordéon est fermé s'affiche alors+ d'info
Etat 2 : l'accordéon est ouvert s'affiche alors- d'info

le hic est qu'il y a 3 volets différents sur la page et que je n'arrive pas à les cibler précisément

le fichier js est

// déclaration de variables vides
var divAccordeon;
var baliseAaccordeon;
var balisePaccordeon;

var balisePinfo;
var baliseMinfo;

var plus_info;
var moins_info;

var lienAccordeon;

//initialisation
function init ()
{
//variables
divAccordeon = $("#accordeon");
balisePaccordeon = divAccordeon.find("p");
baliseAaccordeon = divAccordeon.find("a");

plus_info = $(".plus_info");
balisePlusinfo = plus_info.find("a");

moins_info = $(".moins_info");
baliseMoinsinfo = moins_info.find("a");

//baliseAaccordeon = $("#accordeon a");

//tester : combien de paragraphes et liens trouvés
//alert(balisePaccordeon.length + "---" + baliseAaccordeon.length);

// cacher les p
balisePaccordeon.hide();

//évènements
baliseAaccordeon.click(lienAccordeon);

// cacher les moins_info
moins_info.hide();
/*plus_info.show();*/

//évènements
balisePlusinfo .click(lienAccordeon); /*actuellement cet evènement ne change rien)*/
baliseMoinsinfo .click(lienAccordeon);/*actuellement cet evènement ne change rien)*/
}

function lienAccordeon (e)
{
// propriété priventDefault : supprime comportement par défaut
e.preventDefault();

/*
réccupérer l'indice (position) de la balise <a>
this : cible l'élément sur lequel l'évènement a été déclenché
index : permet de réccupérer l'indice (position) de <a>
mais il est tjs au meme niveau dans la div,
donc il faut remonter d'un niveau
*/
var indice =$(this).parent().index();

//methode eq() permet d'associer l'indice de <p> à l'indice de <a>
balisePaccordeon.eq(indice).slideToggle();

//baliseMoinsinfo.eq(indice).slideToggle();

//Moins d'infos
if(moins_info.css("display")== "none")
{
moins_info.show(600);
}
else
{
moins_info.hide(600);
}

//Plus d'infos
if(plus_info.css("display")== "none")
{
plus_info.show(600);
}
else
{
plus_info.hide(600);
}
}

et le code est html



<div id="accordeon">

<div>

<a href=#>
<img src="images/presentation_fleche_petite.png" width="48" height="65" alt="fleche_accoredeon" />
<h4>UNE VRAIE VALEUR AJOUTÉE DANS LA MULTIPLICITÉ DE L'OFFRE<br/>
ET UNE OFFRE TARIFAIRE ADAPTÉE<br/>
<span class="plus_info">+ D'INFO</span><span class="moins_info">+ D'INFO</span>
</h4>
</a>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</p>

</div>




<div>
<a href=#>
<img src="images/presentation_fleche_petite.png" width="48" height="65" alt="fleche_accoredeon" />

<h4>CHAQUE DEMANDE EST UNIQUE<br/>AVEC UN POINT D'ENTRÉE UNIQUE<br/>
<span class="plus_info">+ D'INFO</span><span class="moins_info">+ D'INFO</span>
</h4>
</a><br/>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</p>

</div>




<div>
<a href=#>
<img src="images/presentation_fleche_petite.png" width="48" height="65" alt="fleche_accoredeon" />

<h4>DES MODALITÉS D'INTERVENTION ADAPTÉES<br/>REPOSANT SUR DE VRAIES VALEURS<br/>
<span class="plus_info">+ D'INFO</span><span class="moins_info">+ D'INFO</span>
</h4>
</a>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
</p>

</div>



Voilà.... je vois bien que je ne cible pas le bon endroit mais ne sais pas comment le faire
Je m'en remets à vous… Merci d'avance
Modifié par plume21 (13 Feb 2013 - 11:02)

Thomas D.

18 Feb 2013 à 15:46

Bonjour plume21.

Merci d'éditer ton post pour ajouter les blocs [code ] [/code ] (sans l'espace avant le crochet pour rendre en rendre la lecture plus digeste Smiley cligne

Pour répondre à ta question, je pense que tu prends le problème à l'envers. Il n'est pas nécessaire de cibler précisément un des éléments sur lesquels l'utilisateur peut cliquer. L'important est que quand il clique, ce soit la bonne action qui soit déclenchée. Dans ton cas, quand on clique sur "+ d'infos", tu veux que le bloc correspondant soit affiché. Il suffit de structurer correctement ton code HTML et de retrouver le bon élément dans le DOM à partir de l'élément qui vient d'être activé...


<!-- Structure HTML d'un volet -->
<div class="volet">
   Blablabla
   <span class="plus_info">Plus d'infos</span>
   <span class="moins_info">Moins d'infos</span>
   <div class="infos">
     Texte à cacher/afficher.
   </div>
</div>


// dans code exécuté avec jQuery :
$('.plus_info').click(function(e) {
  e.preventDefault(); // empêche le comportement par défaut de se propager
  var src = $(this);
  var target = src.next('div.infos'); // récupère le prochain div avec la classe info dans le DOM
  target.show(); // affiche la cible.
});

Le code peut évidemment être amélioré, mais c'est juste pour le principe...

Sujet clos