jQuery“window.location.hash” - 得到哈希太晚了？答案

【问题标题】：jQuery "window.location.hash" - getting hash too late?jQuery“window.location.hash” - 得到哈希太晚了？
【发布时间】：2011-04-01 08:20:39
【问题描述】：

我正在编写一些脚本，但它的哈希值存在严重问题。

我有一个链接图像列表，例如：

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

我要做的就是在点击第一张图片后加载文件 files/#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 并将其淡入。

但实际上，当我单击图像时，它显示为空的#displayFile div，并且在我用相同的哈希刷新站点后，它会加载内容。我相信脚本早在 URL 中就获得了哈希值。

如何解决？

谢谢。

【问题讨论】：

标签： javascript jquery fragment-identifier hashchange browser-state

【解决方案1】：

事件处理程序在默认操作之前运行。缺少涉及setTimeout 的讨厌技巧，您无法在函数完成之前获得要遵循的链接。

改为阅读this.href。

也就是说，听起来您正在使用任意片段标识符而不是 URI 来处理明智的事情。如果是这样：我会修复 href，使其指向加载图像的真实 URL。 Build on things that work.

【讨论】：

【解决方案2】：

当您点击链接时，代码将按以下顺序执行：

jQuery 点击处理程序
点击处理程序
本机/默认行为（调用链接，将其写入 window.location）

我建议您改用this.href。还要使用e.preventDefault()，这样浏览器就不会执行本机/默认行为。

【讨论】：

【解决方案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);  
});

【讨论】：