Question

我目前有一个缩略图库，当点击它时会动画一个模态窗口并通过ajax加载内容。我使用'window.location.hash'为加载到我的模态中的内容创建一个唯一的URL。

var base_url = "http://www.ddbremedy.co.uk/siteupdate/";

$('#work_gallery li a').on('click', function(event) {

    event.preventDefault();
    postLink = $(this).attr('href');
    window.location.hash = postLink.replace(base_url, "");
});

然后动画模式并通过ajax加载内容。然后，当我关闭模态时，我添加此代码以删除加载ajax页面时添加的哈希和url后缀。

if ("pushState" in history) {
    history.pushState("", document.title, window.location.pathname);
} else {
    window.location.hash = "";
}

这一切都很好，但我需要的是能够获取生成的ajax链接并粘贴到新窗口时，自动触发正确缩略图上的单击事件以加载正确的内容。我知道基本上可以检测网址中是否有哈希和特定单词：

var pathname = window.location.hash;
if (pathname.indexOf("work") >= 0) {
    // trigger click event on correct thumbnail to launch modal   
}

我知道我可能需要触发这样的点击事件：

$('#work_gallery li a').trigger('click');

但我无法弄清楚如何根据ajax内容的网址将其应用于正确的缩略图。模态本身是使用jquery完成的，没有任何插件，我也需要保持这种方式。任何帮助将不胜感激。

非常感谢提前。

Answer 1

管理以使其正常运行。 @BenM指出了正确的方向。我就这样做了：

首先，我运行一个名为'checkUrl'的函数，它检查URL以查看它是否包含哈希值。

checkUrl = function() {
    if (window.location.hash) {

    }
};

checkUrl();

然后在if语句中，我将散列路径存储到变量中并将其从散列中分离出来。然后我将哈希后的字符串存储到变量中。

var pathname = window.location.hash,
    rez = pathname.split('#'),
    linkUrl = rez[1];

然后我将该变量作为具有该特定href的链接的选择器传递，并在相应的链接上触发单击事件，然后以正确的模式动画和加载。

$("a[href='http://www.ddbremedy.co.uk/siteupdate/" + linkUrl + "']").trigger('click');

希望这将有助于将来的人。

基于浏览器#link触发点击事件

1 个答案: