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

Question

我正在使用标记JS来显示内容。一切都很好，过滤工作得很好，但是，我不太喜欢Jquery。当来自特定的导航链接或页面

时，我需要加载相对过滤的项目

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

当用户单击下拉框中的相关链接时，或者从主页上，我如何将数据筛选器类传递给对象，所以如果我单击下拉框中的"education"，当它加载页面时，只有数据类为"education"的项目显示?

我已经找了好几天了，似乎找不到解决办法。疯了。

希望有人能帮忙。

欢呼

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 + "']"));
}

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