Question

我有一个jquery投资组合库，有4个类别可以排序。当您单击某个类别时，该组合将通过jquery在同一页面上重新排列，仅显示该类别中的项目。单击特定项目后，用户可以看到项目页面/详细信息。我想在此页面上添加一个后退按钮，这样当用户浏览项目时，他们可以返回到之前的类别。

我厌倦了创建后退按钮的以下内容，但它将我带回主要的投资组合页面，而不是我之前浏览的类别。

function goBack() {
window.history.back();
}

这是一个图库页面，以防万一：http://goo.gl/JeSNjD

Answer 1

不知道你的任何应用程序的代码，这在黑暗中有点像，但我想我知道你可能缺少什么。

使用history.back()将转到您访问的最后一页（仅在更新URL时才会记录页面访问）。如果您使用jQuery更新网站中的内容而不加载新页面，则浏览器的历史记录不会记录此内容，因此会将您带回到首页。

您需要做的是更改后退按钮代码以隐藏当前项目，并重新显示类别页面。您无法使用history.back()。

修改如果您需要更多数据来正确重建上一页，您可以更改类别页面的URL（不一定要简单实现，但可能是最强大的事情），或者存储有关它们来自哪个页面的信息。如果您使用的是Cookie，则可以在那里保存导航，但是当您导航到项目页面时，也可以在查询字符串中添加ref值。

分类页面：

<a href="/home/projectName?ref=categoryName">Link to project</a>

项目页面：

<a href="/home?category=categoryName">Back button</a>

然后使用该信息重新打开或使用您的类别。

Answer 2

一个问题是知道后退按钮应返回哪个类别。例如，/ portfolio / foothill-pasadena-2应该返回办公室类别，而/ portfolio / 131house应该返回到住宅类别。如果我通过电子邮件向您发送了其中一个链接并且您单击它直接进入项目页面，那么当您转到该页面时，页面上是否应该有一个后退按钮，它是否会将您带回所有类别或相关类别该项目？

您可以做的一件事是更改永久链接结构以包括类别，例如/ portfolio / office / foothill-pasadena-2和/ portfolio / residential / 131house。然后你可以硬编码你的后退按钮去/项目。你有一些jquery在那里运行（wp-content / themes / yourtheme / js / jquery.custom.js）：

var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
    itemSelector : '.isotope-item',
    layoutMode : 'fitRows',
    filter : '.food-service'
});

isotopeLink.click(function () {
    var selector = jQuery(this).attr('data-category');
    isotopeContainer.isotope({
        filter : '.' + selector,
        itemSelector : '.isotope-item',
        layoutMode : 'fitRows',
        animationEngine : 'best-available'
    });
    isotopeLink.removeClass('active');
    jQuery(this).addClass('active');
    return false;
});

即找到过滤器div中的四个类别链接并添加单击功能。

也许您可以添加一些额外的代码来获取document.referrer，检查它是否与yoursite.com/new/projects/{category}/{project}匹配，并提取{category}的值。如果类别与您的四个值（食品服务，办公室，住宅，其他）中的一个匹配，则调用该元素上的单击功能。

jquery返回按钮到可排序库中的上一个类别

2 个答案: