在哈希值改变时改变样式

Question

我正在寻找一种通过更改哈希值来更改样式的方法。让我通过一个例子来解释：

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

我想要更改一个类的style。

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

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

事实上，每次哈希值的更改时控制台中没有任何内容出现。

- Sallar Rabiei

Answer 1

窗口：hashchange事件^[文档]

URL的片段标识符发生变化时（即以#符号开头并跟随其后的部分），将触发hashchange事件。

由于您正在尝试检测从?all-drinks=drinks到?all-drinks=drinks&drinks=spirits-drinks的更改，因此这不包含在hashchange中。

---

你可以按照@aljgom在这里的解释来扩展locationchange事件：在他的回答中。 ^{示例JsFiddle} 或者使用onpopstate事件，在这里有说明。 或者进行一些monkey patching来“伪造”某种onpushstate，在这个答案中有解释。

- 0stone0

---

请阅读完整的答案，您需要扩展一些内容，答案中已经很好地解释了。 - 0stone0

@M.SallarRabiei 我已经添加了一个 JSFiddle 链接，里面有一个小例子。 - 0stone0

我非常感谢你的好意 @0stone0，在你添加的 JsFiddle 中，它总是更改URL，但是我想通过 ajax 检查当前URL在任何更改时，并且如果URL等于 X，则包含特定样式，如果URL等于 Y，则包含特定样式。 - Sallar Rabiei

这个链接有帮助吗？如果不行，请详细说明问题。 - 0stone0

谢谢，你提供的第一个链接给了我灵感，最终我找到了方法。非常感谢@0stone0. - Sallar Rabiei