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>

我想做的就是在单击第一个图像后加载文件 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 中之前就已经获取了哈希值。

如何修复它？

谢谢。

Answer 1

事件处理程序在默认操作之前运行。如果没有涉及 setTimeout 的令人讨厌的技巧，您将无法在函数完成之前获取要跟踪的链接。

请阅读 this.href。

也就是说，听起来您正在使用任意片段标识符而不是 URI 来处理有意义的事情。如果是这样：我会修复 href，使其指向加载图像的真实 URL。 建立在有效的基础上。

Answer 2

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

• jQuery click-handlers
• onclick-handlers
• 本机/默认行为（调用链接，将其写入 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);  
});