javascript - 哈希更改时更改样式

Question

我正在寻找一种通过更改散列来更改部分样式的方法。让我通过一个例子来解释:

1. 当前网址是:
   example.com/drinks/?all-drinks=drinks

2. 然后我点击复选框，URL 将更改为:
   example.com/drinks/?all-drinks=drinks&drinks=spirits-drinks

我想改变一个类的样式。

我尝试了以下代码，但它不起作用:

<script>
$( window ).on( 'hashchange', function( e ) {
    console.log( 'hash changed' );
} );
</script>

事实上，每次哈希更改时控制台中都不会显示任何内容。

Answer 1

窗口:hashchange 事件 ^[docs]

The hashchange event is fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the # symbol).

因为您正在尝试检测 ?all-drinks=drinks 到 ?all-drinks=drinks&drinks=spirits-drinks 这不是 包含在 hashchange

中

---

1. 您可以将 locationchange 扩展为 @aljgom在这里解释:in his answer .

   ^{例子 JsFiddle}

2. 或者 onpopstate事件，解释 here

3. 或者一些猴子补丁来“伪造”某种onpushstate 解释in this answer