Discussion :

[Harlock999]

Bonjour à tous,

J'aimerais savoir s'il est possible de modifier l'ancre ciblée par un lien, de façon dynamique (au clic) en javascript (ou jQuery).

Du côté de ma page HTML, j'ai un lien qui cible par défaut l'ancre #toto.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<li class="wbrw01im01">
 <div class="item2">
  <img src="pix/small01126.jpg" alt="title" title="" width="100" height="100"/>
  <div class="surcaption">
   <div class="caption">
    <a href="#toto"></a>
   </div>
  </div>
 </div>
</li>

Ensuite, via un javascript, ce lien fonctionne un peu comme un bouton (c'est-à-dire qu'il fonctionne en quelque sorte en mode ON/OFF).
Par défaut, ce lien est sur OFF et cible donc l'ancre toto.

Une fois qu'il a été cliqué, ce lien/bouton provoque des actions, change de couleur et peut donc être considéré comme sur ON.
Le clic ammène donc, comme prévu, sur l'ancre #toto.

Je souhaiterais changer l'ancre ciblée lorsque l'on remet ce bouton sur OFF.
Par exemple que dans cet état, le clic emmène sur #titi.

Après quelques recherches, j'ai essayé le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("$(this) > a[href^='#titi']");

Mais ça ne semble pas fonctionner.
Une idée ?

[lightbulb]

Attention en Jquery $(this) est une fonction qui sert à identifier l'élément courant comme en javascript normal le this.

Essai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
function changeSrc(){
	$('#monlien').attr('src',"#titi");
}
</script>
 
<img src="#toto" id="monlien" />
<input type="button" value="Change la source" onclick="changeSrc()"/>

[Harlock999]

Mhhh… Pas sûr d'avoir tout compris.

Il n'y aurait pas confusion entre mon lien et mon image (qui se trouve "au-dessus" du lien), entre la div ciblée (href) et la source de l'image (src) ?…

[Bovino]

Ce n'est pas l'exemple à la lettre qu'il faut regarder mais la méthode utilisée et celle proposée par lightbulb est correcte !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).attr('href',"#titi");

[Harlock999]

Merci pour cette précision.

Ça m'arrange effectivement s'il n'y a pas d'ID dans l'histoire, car j'ai beaucoup de boutons différents les uns à côté des autres qui doivent se comporter de façon identique.

Dans la mesure où l'élément déclencheur (ce qui est testé par le javascript) est l'élément <li class="wbrw01im01"> tout en haut, comment dois-je rédiger cette instruction ?

Est-ce un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$((this)>div>div>div>a).attr('href',"#titi");

?

(C'est juste une façon de préciser ma question, je SAIS que ça ne marche pas !)

[Bovino]

Mais non ! this ne peut en aucun cas être utilisé comme un sélecteur !
Il faut utiliser les méthodes de parcours du DOM...