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>

我想要做的就是在点击第一张图片后加载文件文件/＃1.html，在第二张图片后加载文件/＃2.html等。

这是我的jQuery函数：

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

因此，当我点击图片时，它应该将哈希值添加到网址（href =“＃1”），将正确的文件加载到#displayFile div并将其淡入。

但实际上，当我单击图像时，它显示空的#displayFile div，在我用相同的哈希刷新网站后，它会加载内容。我相信脚本会在URL之前获取哈希值。

如何解决？

感谢。

Answer 1

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

请改为阅读this.href。

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

Answer 2

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

jQuery点击处理程序
的onclick-处理程序
native / default behavior（调用链接，将其写入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);  
});

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

3 个答案: