Modifier l'ancre d'un lien au clic en javascript

Version imprimable

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:

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:

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

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

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

Essai :
Code:

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()"/>

05/12/2012, 17h41
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) ?…
05/12/2012, 17h59
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:

$(this).attr('href',"#titi");
05/12/2012, 18h19
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:

$((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 !) ;)
05/12/2012, 18h26
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...
05/12/2012, 18h47
Harlock999

Bon, désolé, je ne connais pas la façon dont c'est censé être rédigé.

Je viens de tenter :

Code:

$('.tabMenuWB > li:not(.blind, .lastblind)').find('a').attr('href',"#titi");

Mais visiblement, ça n'est toujours pas ça…

Si on ne peut pas partir de $(this), la fonction ne risque-t-elle pas de s'appliquer à TOUS les éléments de la page répondant à la même définition ?
05/12/2012, 18h59
DrDarko

Peux tu nous montrer comment tu catch ton évènement click...?

Sinon pourquoi ne pas mettre une ID à ton lien comme ça tu le sélectionnes avec son ID, puis tu lui applique le changement...

Code:

$('#id_du_lien').attr('href',"#titi");
05/12/2012, 19h21
Harlock999

Est-ce que ceci est suffisant ?

Code:

$('.tabMenuWB > li:not(.blind, .lastblind)').click(function(){

Comme je le disais plus haut, ça m'ennuie d'utiliser des ID, car j'ai vraiment beaucoup de liens qui doivent utiliser ce script.

Sinon, dernières nouvelles :

J'arrive à faire changer la cible du lien, en utilisant :

Code:

$('.tabMenuWB > li:not(.blind, .lastblind)').find('a').attr('href',"#titi");

Mais ce changement ne s'effectue qu'au troisième clic !

Ensuite, je n'arrive plus à changer de nouveau la cible du lien pour la faire revenir à sa valeur initiale.

Il doit y avoir une subtilité qui m'échappe :cry:

Bonsoir

Pour : <a class="toggle" href="#toto">Un lien "On/OFF"</a>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
 * La méthode toggle() est une sorte de "on/off" sur l'événement clic.
 * Pour le premier clic et les nombres impairs de clics, c'est la première fonction qui s'exécute.
 * Pour le deuxième clic et les nombres pairs de clics, c'est la seconde fonction qui s'exécute.
 */
$( "a.toggle" ).toggle(
	function( e ){
		// si nécessaire e.preventDefault() ou return false
 
		// exemple :
		e.preventDefault(); // pour éviter de suivre le lien
 
		// votre code, traite le cas #toto, exemple :
		alert( $( this ).attr( "href" ) );
 
		$( this ).attr( "href", "#titi" );
 
 
	},
	function( e ){
		// si nécessaire e.preventDefault() ou return false
 
		// votre code, traite le cas #titi, exemple :
		alert($( this ).attr( "href") );
 
		$( this ).attr( "href", "#toto" );
 
		// exemple :
		return false; // ne suit pas le lien et ne propage pas l'événement
	}
);

06/12/2012, 12h02
Harlock999

Merci Daniel.
Je vais voir si toggle peut effectivement m'aider.
Mais j'ai quelques doutes (à vérifier tout de même) dans la mesure où mes "liens/boutons" sont en réalité testés sur 3 états : les deux les plus évidents ON et OFF. Mais également le cas où le bouton est sur OFF et un autre est sur ON : dans cette situation, l'autre bouton qui est allumé est éteint, avant d'allumer celui sur lequel on clique (appelons ce cas OFF + ON). Ce qui complique pas mal les choses.

En fait, pour l'instant, je suis arrivé à changer la référence du lien au clic grâce aux réponses d'hier soir. Ouf !

J'ai aussi compris une des causes de mon problème : je pensais (naïvement) qu'en plaçant cette instruction au début du clic (ensuite, il y a d'autres instructions type slideup/down pour des animations en jQuery), le clic en question tiendrait compte de ce changement de référence du lien. Mais en fait, ce changement de référence n'est valable que pour le clic suivant.

Mais comme mes différents boutons sont "inter dépendants" (grâce aux 3 états décrits plus haut), je ne vois pas top comment prévoir si le prochain clic sera juste un simple ON ou si ça sera un OFF + ON.

Autre question : est-il possible de donner une instruction qui "annule" la référence en cours, quelle qu'elle soit, pour lui rendre sa valeur par défaut, celle qui est précisée dans le code HTML ? Ça m'aiderait bien, car j'ai des séries de boutons qui ont des références par défaut distinctes et qui doivent donc les retrouver quand les boutons sont mis sur OFF.
06/12/2012, 20h15
danielhagnoul

Bonsoir

Autant la question (message 1) sur un "système ON/OFF" m'a paru claire et la solution évidente, autant je n'y comprends plus rien à votre dernier message.

Poser une question qui ne décrit pas complètement la complexité du problème, c'est une perte de temps pour tout le monde.

Je me demande si vous attaquez votre problème sous le bon angle.

Si j'ai plus ou moins bien compris la dernière question.

Vous devez analyser votre "système", déterminer le nombre d'états possibles, attribuer un numéro à chacun des états. Lors de l'exécution du code, la première partie de votre code doit déterminer dans quel état (quel numéro) s'applique , ensuite un code spécifique pour chaque numéro (état) dans un switch.
06/12/2012, 21h03
Harlock999

Bonsoir,

Je reconnais que je peux être tenté de "simplifier" une partie de ma problématique en posant une question ici. À la base, le but est évidemment de tenter de faire gagner un peu de temps aux gens susceptibles de m'apporter leur aide, et non l'inverse. Si j'expliquais l'ensemble de ce que j'ai mis en place jusqu'ici, sincèrement, ça deviendrait illisible ! Mais, effectivement, cette simplification peut devenir trop réductrice, j'en suis désolé.

Pour rappel, dans un premier temps, je cherchais simplement le moyen de rédiger correctement une instruction qui permette de changer le href d'un lien (je ne suis pas un pro, je ne suis donc pas du tout sûr de la "grammaire" à utiliser - pour autant, je sais à quel point celle-ci est importante).

J'ai fini par trouver ceci qui semble fonctionner :

Code:

$('.tabMenuWB > li:not(.blind, .lastblind)').find('a').attr('href',"#titi");

Déjà, si quelqu'un pouvait me confirmer que c'est une bonne façon de rédiger ma fonction, cela pourrait m'aider.

Aujourd'hui, j'ai tenté de combiner mon système de test après le clic (ce qui existait précédemment pour les états ON/OFF) avec un système de hover (pour le changement du href). Autrement dit, je modifie le href lorsque mon pointeur est positionné sur un bouton ON, ainsi le href est changé AVANT le clic.

Ce qui m'a permis d'obtenir quelques résultats, mais pas encore totalement satisfaisants (ma première séquence OFF > ON > OFF se comporte comme souhaité, mais plus ensuite).

D'accord avec vous, je dois faire un point précis sur ce que j'appellerais le "trajet de mes différents états" et l'appel de mes fonctions.
07/12/2012, 16h42
SylvainPV
Changer le href d'un lien au moment de cliquer dessus ??? C'est pas un paquet surprise, si tu as besoin de changer le href fais-le le plus tôt possible.

Tu pourrais utiliser deux liens au lieu d'un seul, dont tu changerais la visiblité pour alterner l'affichage de l'un et l'autre. ça serait aussi plus facile pour toi pour les styliser.

Sinon autre solution en gardant un seul <a>, stocker l'information de l'état avec une classe par exemple :
Code:

1 2 3 4 $('.tabMenuWB > li:not(.blind, .lastblind) a').on('click',function(){ $(this).toggleClass('lien-on').attr('href','#' + ($(this).hasClass('lien-on') ? "toto" : "titi")); });
07/12/2012, 17h44
Harlock999

Merci Sylvain. Effectivement, ton code est a priori tout à fait efficace dans le cas de boutons indépendants les uns des autres. J'ai testé, c'est impeccable.

Malheureusement, comme j'essayais de l'expliquer précédemment (peut-être pas très clairement ?), ma situation particulière m'embrouille un peu les méninges.

À savoir que j'ai des liens/boutons de ce type "ON/OFF" qui sont les uns à côté des autres. Imaginons 3 boutons B1, B2, B3.
Le clic sur le bouton B1 anime une div en dessous (slidedown) qui laisse apparaître une image (appelons cette image Im1). Le bouton B1 change de couleur. Disons qu'il est sur ON.

Si je clique à nouveau sur B1, cela fonctionne effectivement comme un mode simple ON/OFF. L'image Im1 se replie et le bouton B1 s'éteint. Ici, ton code fonctionne impec.

Mais si mon second clic est fait sur B2 (ce qui constitue ma troisième hypothèse au niveau du test de clic), alors B1 s'éteint, Im1 se replie, B2 s'allume et Im2 se déplie.

Est-ce plus clair ? :?

Donc tout ceci fonctionne (vu mes connaissances en la matière, ça m'a pris pas mal de temps…). Mais du coup, je ne sais pas trop où et comment inclure ce changement de href. À l'intérieur de mon test de clic (3 hypothèses if / else if / else if) ? Ça me semblait logique, mais le changement de href ne s'opère que pour le clic suivant (ce que je comprends) ce qui ne m'arrange guère.

Ou bien dois-je passer cette instruction "à part" de mon test de clic existant ?

Sinon, pour info, quelle est la différence entre :

Code:

$('.tabMenuWB > li:not(.blind, .lastblind) a').click(function(){

et

Code:

$('.tabMenuWB > li:not(.blind, .lastblind) a').on('click',function(){

???

Oufff, j'ai fini par arriver à mes fins ! :ccool:

Finalement, j'ai cumulé le changement de href au clic (= comportement par défaut pour le prochain clic) avec un changement de href au hover (= comportement JUSTE AVANT le clic). Apparemment ça fonctionne…

À ce stade, il me reste donc deux questions :

1/ La détection du hover suppose 2 états, comme suit :
Code:

1 2 3 4 5 6 7 8 9 $('.tabMenuWB > li:not(.blind, .lastblind)').hover(function(){ état 1 : actions à appliquer quand on survole la zone },function(){ état 2 : actions à appliquer quand on quitte la zone });
Est-ce problématique de laisser l'état 2 totalement vide de toute instruction ?

2/ Question suivante (pour ceux qui ont réussi à suivre !) :

Mes "liens/boutons" sont répartis en "lignes". C'est-à-dire que j'ai une ligne de 5 boutons, puis en dessous une autre, puis une autre, etc.

Ce qui pourrait donner (en version simpifiée) quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <li> <a href="#cible01"></a> </li> <li> <a href="#cible01"></a> </li> <li> <a href="#cible01"></a> </li> <li> <a href="#cible01"></a> </li> <li> <a href="#cible01"></a> </li> <li> <a href="#ciblepardefaut02"></a> </li> <li> <a href="#ciblepardefaut02"></a> </li> <li> <a href="#ciblepardefaut02"></a> </li> <li> <a href="#ciblepardefaut02"></a> </li> <li> <a href="#ciblepardefaut02"></a> </li>
Pour changer la cible de ces liens au survol, j'utilise ceci (toujours en version simplifiée) :
Code:

1 2 3 4 5 6 7 $('.tabMenuWB > li:not(.blind, .lastblind)').hover(function(){ $('.tabMenuWB > li:not(.blind, .lastblind)').find('a').attr('href',"#premiere_rangee_de_boutons"); } },function(){ });
Résultat : quelle que soit la rangée, ma cible reste celle de la première rangée.

Comme je pense qu'il serait peu lourd d'avoir un javascript distinct par rangée de boutons, je souhaiterais savoir s'il est possible que ma fonction javascript jQuery attribue le href par défaut (celui qui est présent du côté HTML) plutôt que de mentionner un href "en dur" ?

Si ma question n'est pas claire, n'hésitez pas à me taper sur la tête :P

07/12/2012, 21h40
SylvainPV

Citation:

Envoyé par Harlock999

Finalement, j'ai cumulé le changement de href au clic (= comportement par défaut pour le prochain clic) avec un changement de href au hover (= comportement JUSTE AVANT le clic). Apparemment ça fonctionne…

Ca ne marchera pas si tu navigues au clavier ou avec certains périphériques tactiles. C'est une solution complètement bancale et tu ne peux pas te contenter de ça. D'ailleurs tu as l'air toi-même surpris que ça fonctionne :roll:

Maintenant qu'on en sait plus sur ce que tu veux faire concrètement, je peux te dire qu'utiliser les ancres me semble pas du tout approprié. Si tu veux "déplier" une image, utilise des méthodes comme slideDown. Si tu veux scroller jusqu'à un élément, utilise scrollTop : http://api.jquery.com/scrollTop/

Après j'ai peut-être pas tout compris ton problème, mais forcément si tu nous donnes les éléments du problème un par un... Tu n'aurais pas une démo ou un exemple à nous montrer ? A la rigueur reproduis un exemple rapidement sur un jsFiddle/jsBin
10/12/2012, 18h29
Harlock999

Je ne pense pas avoir été "surpris" que ça fonctionne, dans la mesure où ce que j'ai mis au point a été le résultat d'une (trop longue) réflexion. En revanche, ça m'a soulagé, oui. Je le répète, même si je dois régulièrement travailler quelques bouts de code, ce n'est ni ma formation ni mon métier. Essaie de construire une phrase complexe en japonais sans l'avoir jamais appris, en n'ayant à ta disposition qu'un dictionnaire. Pas si facile.

Effectivement, en utilisant la détection du hover, ça semblait un peu compromis pour les interfaces tactiles. Néanmoins, étrangement, ma solution fonctionnait aussi sur iphone.

J'ai tout de même persévéré… Et j'ai fini par arriver à me contenter du test du clic, en attribuant des href différents aux boutons ON et OFF. J'attribue un href à TOUS les boutons et ensuite un href différent à mon bouton ON. Cette différenciation me permet d'arriver au résultat recherché.

C'est bien la fonction slidedown/slideup que j'utilise, comme je l'ai indiqué au sein de l'un de mes messages.

J'utilise également localscroll et scrollto pour des scrolls fluides entre les différentes zones de ma page. Ceci dit, ceci s'appuie bel et bien sur l'existence des ID au sein de ma page. Je ne vois donc pas trop ce qui pose problème dans le fait de cibler des ID dans mes href.

Par ailleurs, j'ai finalement pu attribuer des href distincts à chaque rangée de boutons en attribuant des classes différentes à mes listes. Ce qui me permet de cibler avec plus de précision mes changements de href en jquery.

Un grand merci à ceux qui ont bien voulu m'aider.