jQuery 同位素哈希历史记录 : prettify the hash-URL

Question

我正在使用Isotope与哈希历史记录。它工作得很好，但我对这个 URL 不满意 - 我想简化和清理它。

当前使用:

var href = $this.attr('href').replace( /^#/, '' );
var option = $.deparam( href, true );`

在此标记上:

<li><a href="#filter=.work/">Work</a></li>

那么，我的问题是:如何让它与以下标记一起工作？

<li><a href="#/work/">Work</a></li>

我仅使用过滤器，所有其他同位素选项均已锁定，因此我希望删除对过滤器的引用。

提前致谢!

Answer 1

我正在使用这个:

function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match(/^#?(.*)$/)[1]; // this is to get the name of the class
  var hashFilter = matches;
  return hashFilter;

}

$( function() {
  var $container = $('. isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'span', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = '/' + filterAttr.substr(1); // adding the slash for the url
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $container.isotope({
      itemSelector: '.element-item',
      filter: '.' + hashFilter.substr(1) //adding the . so it can match the data-filter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter=".' + hashFilter + '"]').addClass('is-checked');
    }
  }

  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
});

我意识到 * 在此之后将不起作用。因此，您需要添加另一个类/数据过滤器来显示所有内容。