jQuery "window.location.hash" - получить хеш слишком поздно?

Question

Я работаю над некоторым сценарием, но у него есть серьезные проблемы с хэшами.

У меня есть список ссылок-изображений, таких как:

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

Все, что я хочу сделать, это загрузить файлы file /#1.html после нажатия на первое изображение, files/#2.html после второго и т. Д.

Вот моя функция jQuery:

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

Поэтому, когда я нажимаю на изображение, оно должно добавить хэш к URL (href="#1"), загрузить нужный файл в #displayFile div и добавить его.

Но на самом деле, когда я нажимаю на изображение, он показывает пустой div #displayFile, и после того, как я обновляю сайт с тем же хешем, он загружает контент. Я считаю, что скрипт получает хэш задолго до того, как он находится в URL.

Как это исправить?

Благодарю.

Answer 1

Обработчики событий выполняются перед действиями по умолчанию. Если не считать неприятных трюков с участием setTimeout вы не можете получить ссылку для перехода до завершения функции.

Читать this.href вместо.

Тем не менее, похоже, что вы используете произвольные идентификаторы фрагментов вместо URI для разумных вещей. Если так: я бы исправил href, чтобы он указывал на реальный URL, который загружает изображение. Строить на вещах, которые работают.

Answer 2

При нажатии на ссылку код будет выполнен в следующем порядке:

• jQuery обработчики кликов
• OnClick-обработчики
• Собственное поведение / поведение по умолчанию (вызов ссылки, запись ее в window.location)

Я бы порекомендовал вам использовать this.href вместо. Также используйте e.preventDefault() таким образом, собственное поведение / поведение по умолчанию не выполняется браузером.

Answer 3

Поскольку событие по умолчанию изменяет location.hash еще не произошло, вы можете получить .hash вместо этого прямо с якоря, вот так:

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

Хотя, поскольку изображение является единственным, вы можете прикрепить обработчик к <a> Сам, вот так:

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