【问题标题】:How to trigger different functions on hash change based on hash value with jQuery?如何使用jQuery根据哈希值触发不同的哈希变化函数?
【发布时间】:2011-05-30 09:58:29
【问题描述】:

我正在使用Ben AlmanjQuery hashChange 事件插件。 哈希部分如下所示:

#x=1&y=2&z=3

我已经有了解析它的函数getHashPart(key)setHashPart(key)

我想要一个函数,它允许注册仅更改散列的特定部分。 我会这样使用它(我猜......):

$(window).hashchange('x',function(new_value_of_x) {do something x related;});
$(window).hashchange('y',function(new_value_of_y) {do something y related;});

如何使用 jQuery 注册这样的函数? 有类似的吗?

谢谢!

【问题讨论】:

  • bennadel.com/blog/… 解释了如何为页面的 url 设置 onchange 事件。但是,如果您正在做我认为您正在做的事情,您应该绑定设置哈希的链接以执行您希望它执行的操作,然后在文档加载时检查 url 中是否有任何哈希来执行它应该。
  • 好文章。我会继续查看其他建议的解决方案。
  • ps。如果我是你,我会将问题的标题更改为“如何使用 jQuery 根据哈希值触发不同的哈希更改函数?”。只是一个提议。

标签: javascript jquery hashchange


【解决方案1】:

您可以拥有一个响应所有 hashchange 事件的函数(最好保持 hashchange 插件处于使用状态),然后像这样重定向到各个处理程序:

var hashParameters = {};

$(window).bind("hashchange",function(event) {
//if you're using the awesome hashchange plugin
//$(window).hashchange(function(event) { ...
    var newParameters = getParameters(event.target.location.hash.substring(1));
    $.each(newParameters, function(key, value) {
       if(hashParameters[key] !== value) $(window).trigger(key + "-change");
       hashParameters[key] = value;
    });
});

$(window).bind("andsome-change", function() {
    alert("hi!");
});

function getParameters(paramString) {
    //taken from http://stackoverflow.com/questions/4197591/parsing-url-hash-fragment-identifier-with-javascript/4198132#4198132
    var params = {};
    var e, a = /\+/g, r = /([^&;=]+)=?([^&;]*)/g,
        d = function (s) { return decodeURIComponent(s.replace(a, " ")); };
    while (e = r.exec(paramString))
       params[d(e[1])] = d(e[2]);
    return params;
}

window.location.hash = "some=value&andsome=othervalue";

我有一个工作演示 here(现在带有 hashchange 插件,请参阅第一条评论)。

【讨论】:

  • +1,仅供参考,您可以在 jsFiddle 中包含外部脚本 - 在左侧单击“添加资源”并粘贴链接。或者,只需粘贴 <script src="whatever" ></script>在 HTML 框架中。
  • “我不能”也意味着“我太懒了”=)) 非常感谢您的建议,这里是修复的链接:jsfiddle.net/TuVBL/1
猜你喜欢
  • 2012-02-13
  • 2012-07-07
  • 2020-07-18
  • 2021-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多