[Résolu]Problème identification des selecteurs

Bonjour,
Novice en jquery, je me heurte à un problème pour identifier un sélecteur... problème surement très simple mais bon... le voici :

J'ai un bloc div.titre suivi d'un div.bloc ( Code Html ci-dessous )
Dans div.titre, un H2
J'ai une fonction .click sur le selecteur div.titre qui affiche est masque les blocs div.bloc, jusque là, ca se passe.
Je souhaite maintenant modifier le backgroundImage de la balise h2 contenue dans le div.titre qui vient d'être cliqué.

j'ai testé :

$(".accordion div.titre").click(
  function()
    {
        $(this).('div.titre h2').css({ backgroundImage : "url(img/moins.jpg)" });
        $(this).('h2').css({ backgroundImage : "url(img/moins.jpg)" });

....
});

Bref, j'ai pas compris comment pointer sur le div.titre h2

En vous remerciant

Code Html ci-dessous

<div class='accordion'>

<div class='titre'>
  <h2>$_h2_1</h2>
  texte ici
</div>
<div class='bloc'>
  <ul>
    <li><a href='$site_url/fiche.php' title=''>aaaa</a></li>
    <li><a href='$site_url/fiche.php' title=''>bbbb</a></li>
  </ul>
</div>


<div class='titre'>
  <h2>$_h2_2</h2>
  <br /><label>toto 1 :</label> 400
  <br /><label>toto 3 :</label> 400  
  <br /><label>... :</label> 400          
</div>
<div class='bloc'>
  <h3>$_h2_2_h3_1</h3>
  <ul>
    <li><a href='$site_url/fiche.php' title=''>aaaa</a></li>
    <li><a href='$site_url/fiche.php' title=''>bbbx</a></li>
    <li><a href='$site_url/fiche.php' title=''>ccc</a></li>
  </ul>
</div>

</div>

Modifié par jmi (13 Jun 2010 - 12:09)

Bonjour,

Avant d'apprendre jQuery, il aurait été préférable d'apprendre des rudiments de JavaScript. Sans cela, tu fais des erreurs grossières comme celle-ci:

$(this).('div.titre h2')

$(this) va retourner un objet jQuery. Quand derrière tu utilises un point, c'est pour appeler une propriété (valeur) ou une méthode (fonction) de cet objet. Donc la bonne syntaxe serait:

maFonctionQuiRetourneUnObjet(params1).uneMethode(params2)

et toi tu écris:

maFonctionQuiRetourneUnObjet(params1).(params2)

Sans donner le nom de la méthode, la syntaxe est bien entendu fausse, et tu te retrouves à priori avec une erreur JavaScript qui bloque l'exécution de ton script ou de ta fonction.

En l'occurrence tu aurais intérêt à utiliser la méthode find de jQuery:

$(this) // Correspond à un div.titre qui vient d'être cliqué
.find('h2') // on est déjà dans div.titre, donc on «cherche» uniquement le H2
.toggleClass('open'); // on ajoute ou enlève une classe "open" à chaque clic

J'ai un peu altéré le fonctionnement de ton code. Au lieu de définir des styles CSS directement en JavaScript, je me contente de rajouter une classe "open" au premier clic, de l'enlever au second clic, de la rajouter au troisième, etc. (c'est ainsi que fonctionne la méthode toggleClass de jQuery, si la classe n'existe pas au départ). Note qu'on pourrait aussi bien rajouter la classe "open" sur div.titre plutôt que sur le H2. En tout cas, définir tes styles et images de fond pour l'un et l'autre état (H2 avec et sans classe "open") devrait se faire dans ton CSS, pas dans le JavaScript. Ça vaut pour l'ensemble de ton script: rajoute et enlève des classes, et n'utilise pas la méthode css de jQuery.

Note que j'ai écrit le code ci-dessus sur plusieurs lignes, mais on aurait aussi pu écrire:

$(this).find('h2').toggleClass('open');

Pour apprendre les bases de JavaScript:
http://www.opera.com/company/education/curriculum/
La documentation de jQuery:
http://docs.jquery.com/Main_Page

Bonjour,

Florent V. a écrit :

Avant d'apprendre jQuery, il aurait été préférable d'apprendre des rudiments de JavaScript. Sans cela, tu fais des erreurs grossières comme celle-ci:

En fait, c'est ce que fait, mais au lieu de commencer par jquery, je mène les deux de front depuis 3 jours... j'aurais du mettre novice en js et jquery.

Tes explications sont très claires, je n'avais bien compris l'utilisation de la méthode find().
Merci pour ton aide et tes recommandations, je vais les mettre en pratique et revoir ma feuille de style afin de jouer sur les classes au lieu de les modifier en JS.

Avec mes remerciements.