Как получить доступ к моему разделу с идентификатором и фильтром с помощью Isotope JS (одновременно)? - PullRequest
Новая
       26

Как получить доступ к моему разделу с идентификатором и фильтром с помощью Isotope JS (одновременно)?

0 голосов
/ 22 февраля 2019

Добрый день!

Я использую замечательный инструмент под названием Isotope JS на моем сайте.В моем index.html я создал раздел с идентификатором " isotope ", где я использую свою изотопную фильтрацию.Теперь из других моих страниц я бы хотел получить доступ к этому разделу и с фильтрацией.

Итак, я использовал метод Hash History и попытался отредактировать некоторые вещи, такие как edit.hash, чтобы написать свой URL / filter = '(класс, который я использую для фильтрации) '.

Я бы хотел иметь возможность получить доступ к своему якору index.html и иметь нужный мне фильтр, например:

www.mywebsite.com/#isotope/filter=".redboxes"

или

www.mywebsite.com / # isotope? filter = ". redboxes"

Вот предварительный просмотр моего кода.

// filter functions
var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };

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

  // init Isotope
  var $grid = $('.grid');

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

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $grid.isotope({
      itemSelector: '.element-item',
      layoutMode: 'fitRows',
      // use filterFns
      filter: filterFns[ hashFilter ] || hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filterButtonGroup.find('.is-checked').removeClass('is-checked');
      $filterButtonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
  }

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

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

Есть идеи?

Я пытался найти решения здесь, в StackOverflow.Но я ничего не нашел.И это первый раз, когда я использую IsotopeJS, поэтому я не знаю, возможно ли сделать то, что мне нужно.

Спасибо большое!?

...