Блог

Моя галерея Isotope, которую вы можете увидеть здесь, использует приведенный ниже код для обновления хэшей URL-адресов в адресной строке в зависимости от выбранного класса. Если вы выберете класс Mishmash , вы увидите https://thedivtagguy.com/#filter=.mishmash в адресной строке. Эта часть работает хорошо, но если вы попытаетесь перейти к URL-адресу категории Mishmash, который я показал вам выше, он выделяет только класс фильтра и фактически не сортирует сетку.

РЕДАКТИРОВАТЬ: похоже, это работает и работает.

Почему это не работает, код кажется действительным?

 <script>
(function($) {
    

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match( /filter=([^amp;] )/i );
  var hashFilter = matches amp;amp; matches[1];
  return hashFilter amp;amp; decodeURIComponent( hashFilter );
}
$( function() {

  var $grid = $('.isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'li', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter='   encodeURIComponent( filterAttr );
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter amp;amp; isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    console.log(hashFilter);
    // filter isotope
    $grid.isotope({
      // itemSelector: '.selector.col-md-6.col-lg-4',
      filter: hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.active').removeClass('active');
      console.log($filters.find('.active'));
      $filters.find('[data-filter="'   hashFilter   '"]').addClass('active');
    }
  }

  $(window).on( 'hashchange', onHashchange );

  // trigger event handler to init Isotope
  onHashchange();
});
    
})( jQuery );

  

Во-вторых, я попытался добавить эти ссылки в свое главное меню (чтобы по сетке можно было перемещаться сверху, и если пользователь находится на других страницах, он перенаправит на главную страницу и просто отфильтрует сетку), и я ввел полные URL-адреса для каждой категории в качестве ссылок, поэтому главное менюимеет элемент Mishmash , который имеет ссылку https://thedivtagguy.com/#filter=.mishmash . Как вы можете видеть на изображении ниже, по какой-то причине все ссылки активны, но навигация по ним бесполезна; только URL в адресной строке изменяется без фактической фильтрации. Какая часть кода вызывает это и как мне сделать другие ссылки неактивными?

ОБНОВЛЕНИЕ: видеоклип проблемы доступен здесь

В вашем коде есть две основные проблемы:

1. Вы .isotope за выбор контейнера, но у вас нет контейнера с классом isotope , вместо этого измените свой код на var $grid = $('.masonry');

2. У вас есть некоторый класс и идентификаторы, установленные для вашего дополнительного меню навигации, используйте те же классы и для вашего главного меню навигации, если вы хотите, чтобы была выделена активная ссылка на фильтр. Что означает добавление:

   2.1 data-filter атрибут для li элементов

   2.2 изменить var $filters = $('#filters') на var $filters = $('#filters, #menu-portfolio-1')

для отображения активных категорий и отсортированных элементов… вы должны назначить свою onHashchange() внутреннюю функцию загрузки окна.

 window.onload = function() {
   onHashchange()
};
  

дополнительная информация MDN