Показывать активные элементы при загрузке страницы - Wookmark JS

Question

Я использую Wookmark JS для отображения содержимого. Все хорошо, фильтрация работает хорошо, но я не слишком горяч на Jquery. Мне нужно загрузить относительные отфильтрованные элементы при переходе по определенной навигационной ссылке или странице

Вот ссылка на страницу с прототипом: http://cumminganderton.designnut.co.uk/projects.html

Как передать data-filter-class объектам, когда пользователь нажимает соответствующую ссылку в раскрывающемся меню или на домашней странице, поэтому, если я нажимаю "образование" в раскрывающемся меню, при загрузке страницы отображаются только элементы с класс данных отображения "образование"?

Я искал несколько дней, кажется, не могу найти решение... схожу с ума.

Надеюсь, кто-то может помочь.

ура

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

Вы, вероятно, должны добавить некоторую проверку ошибок, чтобы убедиться, что такой элемент действительно существует, прежде чем пытаться фильтровать по нему.