2

ハッシュ履歴付きのアイソトープを使用しています。うまく機能しますが、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>

私はフィルターのみを使用しています。他のすべての同位体オプションはロックされているため、フィルターへの参照を削除したいと考えています。

前もって感謝します！

4

1 に答える 1

0

私はこれを使用しています：

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();
});

*はこの後動かないことに気づきました。したがって、すべてを表示するには、別のクラス/データフィルターを追加する必要があります。

于 2015-11-01T07:42:37.717 に答える