javascript jQuery“window.location.hash” - 获取哈希太晚了？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3525810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery "window.location.hash" - getting hash too late?
提问by aldona
I'm working on some script but it have a serious problem with hashes.
我正在编写一些脚本，但它的哈希值存在严重问题。
I have a list of link-images like:
我有一个链接图像列表，例如：
<a href="#1"><img src="1.jpg" /></a>
<a href="#1"><img src="2.jpg" /></a>
<a href="#1"><img src="3.jpg" /></a>
All I want to do is to load file files/#1.html after clicking the first image, files/#2.html after the second etc.
我想要做的就是在单击第一个图像后加载文件 files/#1.html，在第二个之后加载 files/#2.html 等等。
Here's my jQuery function:
这是我的 jQuery 函数：
$("a img").click(
function()
{
var hash = window.location.hash;
$("#displayFile").load('files/'+ hash +'.html');
$("#displayFile ").fadeIn(300);
});
So when I click a image it should add hash to the url (href="#1"), load the right file to #displayFile div and fade it in.
因此，当我单击图像时，它应该将哈希添加到 url (href="#1")，将正确的文件加载到 #displayFile div 并将其淡入。
But actually when I click the image it shows empty #displayFile div and after i refresh the site with the same hash it loads the content. I believe the script gets the hash long before it's in URL.
但实际上，当我单击图像时，它显示空的 #displayFile div，在我使用相同的哈希刷新站点后，它会加载内容。我相信脚本在 URL 中很久之前就获得了哈希值。
How to fix it?
如何解决？
Thanks.
谢谢。
回答by Quentin
Event handlers run before default actions. Short of nasty tricks involving setTimeoutyou can't get the link to be followed before the function completes.
事件处理程序在默认操作之前运行。缺少涉及setTimeout您的讨厌技巧，您无法在功能完成之前获得要跟踪的链接。
Read this.hrefinstead.
this.href改为阅读。
That said, it sounds like you are using arbitrary fragment identifiers instead of URIs to sensible things. If so: I'd fix up the href so it points to a real URL that loads the image. Build on things that work.
也就是说，听起来您正在使用任意片段标识符而不是 URI 来处理合理的事情。如果是这样：我会修复 href 以便它指向加载图像的真实 URL。建立在有用的东西上。
回答by Marcel Hymanwerth
When you click the link, code will be executed in the following order:
当您单击链接时，代码将按以下顺序执行：
- jQuery click-handlers
- onclick-handlers
- native/default behavior (calling the link, writing it to window.location)
- jQuery 单击处理程序
- 点击处理程序
- 本机/默认行为（调用链接，将其写入 window.location）
I would recommend that you use this.hrefinstead. Also use e.preventDefault()so the native/default behavior isn't performed by the browser.
我建议你this.href改用。也使用，e.preventDefault()以便浏览器不执行本机/默认行为。
回答by Nick Craver
Since the default event changing the location.hashhasn't happened yet, you can fetch the .hashfrom the anchor directly instead, like this:
由于更改 的默认事件location.hash尚未发生，您可以.hash直接从锚点获取，如下所示：
$("a img").click(function() {
var hash = this.parentNode.hash;
$("#displayFile").load('files/'+ hash +'.html').fadeIn(300);
});
Though, since the image is the only thing, you can attach the handler to the <a>itself, like this:
但是，由于图像是唯一的东西，您可以将处理程序附加到它<a>本身，如下所示：
$("a").click(function() {
$("#displayFile").load('files/'+ this.hash +'.html').fadeIn(300);
});
