window.location.hash 总是返回前一个而不是当前的哈希

Question

所以我在 html/css/javascript 中制作了一个映射图像。 我这样做了，所以当我单击一个区域时，调用了一个函数 get 来显示一个模式，内容取决于 location.hash 由于映射区域中的 href 属性而发生变化。 问题是，它始终是前一个哈希，而不是当前哈希， 例如：

- #hash1
- #hash2, location.hash returns: #hash1
- #hash3, location.hash returns: #hash2
- #hash4, location.hash returns: #hash3
- #hash5, location.hash returns: #hash4
- #hash6, location.hash returns: #hash5
- #hash7, location.hash returns: #hash6

etc.

这是为什么呢？我该如何解决这个问题？

我使用的代码总结：

<img src="image.png" width="300" height="300" usemap='#modalmap'>

<map name="modalmap">
    <area shape="rect" coords="0,0,150,150" alt="topleft" href="#topleft" target="_self" title="topleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,0,300,150" alt="topright" href="#topright" target="_self" title="topright" onclick="appearModal(event)">
    <area shape="rect" coords="0,150,150,300" alt="bottomleft" href="#bottomleft" target="_self" title="bottomleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,150,300,300" alt="bottomright" href="#bottomright" target="_self" title="bottomright" onclick="appearModal(event)">
</map>
<script>
function appearModal(event){
    switch(location.hash){
    case "#topright":
    console.log(location.hash);
    break;
case "#bottomright":
    console.log(location.hash);
    break;
case "#bottomleft":
    console.log(location.hash);
    break;
case "#topleft":
    console.log(location.hash);
    break;
default:
    console.log(location.hash);

}
</script>

Answer 1

问题是您的函数在更改之前获取 location.hash。要修复它，您必须直接从您单击的元素中获取哈希值。

我附上了一个带有解决方案的代码笔：

Codepen

<img src="image.png" width="300" height="300" usemap='#modalmap'>

<map name="modalmap">
    <area shape="rect" coords="0,0,150,150" alt="topleft" href="#topleft" target="_self" title="topleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,0,300,150" alt="topright" href="#topright" target="_self" title="topright" onclick="appearModal(event)">
    <area shape="rect" coords="0,150,150,300" alt="bottomleft" href="#bottomleft" target="_self" title="bottomleft" onclick="appearModal(event)">
    <area shape="rect" coords="150,150,300,300" alt="bottomright" href="#bottomright" target="_self" title="bottomright" onclick="appearModal(event)">
</map>

function appearModal(event) {

    var hash = event.target.hash;
    switch (hash) {
        case "#topright":
            console.log(hash);
            break;
        case "#bottomright":
            console.log(hash);
            break;
        case "#bottomleft":
            console.log(hash);
            break;
        case "#topleft":
            console.log(hash);
            break;
        default:
            console.log(hash);

    }
}

Answer 2

试试这个：

function appearModal(event) {
    setTimeout(function() {
        switch (location.hash) {
            case "#topright":
                console.log(location.hash);
                break;
            case "#bottomright":
                console.log(location.hash);
                break;
            case "#bottomleft":
                console.log(location.hash);
                break;
            case "#topleft":
                console.log(location.hash);
                break;
            default:
                console.log(location.hash);
        }
    }, 10);
}

这是因为浏览器先执行了你的 onclick 函数，然后改变了哈希，所以你总是得到之前的哈希。

代码向上的工作方式是先让哈希更改发生，然后执行 onclick 函数，因为 setTimeout 可以让其他过程先执行，直到进程空闲