Question

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

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

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

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

希望有人可以提供帮助。

干杯

Answer 1

如果您希望在重新加载或链接时将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 + "']"));
}

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

在页面加载时显示活动项目 - Wookmark JS

1 个答案: