jQuery "window.location.hash" - obtenir du hash trop tard?

Question

Je travaille sur un script mais il a un sérieux problème avec les hachages.

J'ai une liste de liens-images comme:

<a href="#1"><img src="1.jpg" /></a> 
<a href="#1"><img src="2.jpg" /></a> 
<a href="#1"><img src="3.jpg" /></a> 

Tout ce que je veux faire est de charger des fichiers de fichiers/# 1.html après avoir cliqué sur la première image, les fichiers/# 2.html après la deuxième, etc.

Voilà ma fonction jQuery:

$("a img").click(
function() 
{ 
     var hash = window.location.hash; 
     $("#displayFile").load('files/'+ hash +'.html'); 
     $("#displayFile ").fadeIn(300); 
}); 

Alors, quand je clique sur une image, il faut ajouter à l'url hachage (href = "# 1"), charger le fichier droit à #displayFile div et disparaître.En fait, lorsque je clique sur l'image, elle affiche #displayFile div vide et après avoir actualisé le site avec le même hachage, il charge le contenu. Je crois que le script obtient le hachage longtemps avant qu'il ne soit dans l'URL.

Comment le réparer?

Merci.

Answer 1

Les gestionnaires d'événements s'exécutent avant les actions par défaut. Court de mauvaises astuces impliquant setTimeout vous ne pouvez pas obtenir le lien à suivre avant que la fonction se termine.

Lecture à la place this.href à la place. Cela dit, il semble que vous utilisiez des identificateurs de fragment arbitraires au lieu d'URI pour des choses sensées. Si oui: je réparerais le href afin qu'il pointe vers une URL réelle qui charge l'image. Build on things that work.

Answer 2

Lorsque vous cliquez sur le lien, le code sera exécuté dans l'ordre suivant:

• jQuery clics gestionnaires
• onclick-gestionnaires
• comportement natif/par défaut (appeler le lien, il écrit window.location)

Je vous recommande d'utiliser this.href à la place. Utilisez également e.preventDefault() afin que le comportement natif/par défaut ne soit pas effectué par le navigateur.

Answer 3

Depuis l'événement par défaut de changer le location.hash n'a pas encore eu lieu, vous pouvez chercher le .hash de l'ancre directement à la place, comme ceci:

$("a img").click(function() { 
    var hash = this.parentNode.hash; 
    $("#displayFile").load('files/'+ hash +'.html').fadeIn(300); 
}); 

Bien que, puisque l'image est la seule chose, vous pouvez Attachez le gestionnaire au <a> lui-même, comme ceci:

$("a").click(function() { 
    $("#displayFile").load('files/'+ this.hash +'.html').fadeIn(300); 
});