0

我正在使用 wookmark JS 来显示内容。一切都很好，过滤效果很好，但是，我对 Jquery 并不太热。当来自特定导航链接或页面时，我需要加载相关过滤项目

这是原型页面的链接： http: //cumminganderton.designnut.co.uk/projects.html

当用户单击下拉列表或主页中的相关链接时，如何将数据过滤器类传递给对象，因此，如果我单击下拉列表中的“教育”，则在加载页面时，只有带有“教育”显示的数据类？

我一直在寻找几天，似乎无法找到解决方案.. 发疯了。

希望有人可以提供帮助。

干杯

4

1 回答 1

0

如果您希望 Javascript 触发的更改在重新加载或链接到页面时应用到页面，则 URL 需要包含一些内容，告诉 Javascript 在加载时应用过滤器。页面位置是最hash常用的方法。

我建议您稍微分解一下onClickFilter并更改页面位置的哈希：

    var onClickFilter = function(event) {
      updateWithFilterElement($(event.currentTarget));
    }

    var updateWithFilterElement = function(item) {
      var activeFilters = [];

      if (!item.hasClass('active')) {
        filters.removeClass('active');
        location.hash = '';
      }
      item.toggleClass('active');

      // Filter by the currently selected filter
      if (item.hasClass('active')) {
        activeFilters.push(item.data('filter'));
        location.hash = item.data('filter');
      }

      handler.wookmarkInstance.filter(activeFilters);
    };

现在，当用户单击过滤器时，它会存储在 URL 中以供以后使用。加载图像并设置鼠标事件后，如果位置有哈希，则可以添加代码来更改过滤器：

if (location.hash != '') {
  updateWithFilterElement($("*[data-filter='" + location.hash + "']"));
}

您可能应该添加一些错误检查以确保在尝试过滤之前确实存在这样的元素。

于 2014-05-08T22:49:30.137 回答