Question

我正在使用同位素，并且试图将这两个示例中的两种不同功能结合在一起：

https://s.codepen.io/desandro/debug/vErxXj#filter=numberGreaterThan50

当我保留顶部脚本时，搜索和过滤器起作用；当移除顶部脚本时，URL过滤器起作用，因此我需要弄清楚如何将它们组合起来？

这是我的代码：

 <!doctype html>
    <html class="export" lang="en">
    <head>

    </head>
    <body class="page--index">

                    <div class="dictionary-search">
                        <p><input type="text" id="quicksearch" placeholder="Search" /></p>
                    </div>

    <div class="big-demo" data-js="hero-demo">

      <div class="ui-group">
        <div id="filters" class="button-group">
          <button class="button is-checked"  data-filter="*">show all</button>
          <button  data-filter=".a">A</button>
          <button  data-filter=".b">B</button>
          <button  data-filter=".c">C</button>
          <button  data-filter=".d">D</button>
          <button  data-filter=".e">E</button>
          <button  data-filter=".f">F</button>
          <button  data-filter=".g">G</button>
          <button  data-filter=".h">H</button>
          <button  data-filter=".i">I</button>
          <button  data-filter=".j">J</button>
          <button  data-filter=".k">K</button>
          <button  data-filter=".l">L</button>
          <button  data-filter=".m">M</button>
          <button  data-filter=".n">N</button>
          <button  data-filter=".o">O</button>
          <button  data-filter=".p">P</button>
          <button  data-filter=".q">Q</button>
          <button  data-filter=".r">R</button>
          <button  data-filter=".s">S</button>
          <button  data-filter=".t">T</button>
          <button  data-filter=".u">U</button>
          <button  data-filter=".v">V</button>
          <button  data-filter=".w">W</button>
          <button  data-filter=".x">X</button>
          <button  data-filter=".y">Y</button>
          <button  data-filter=".z">Z</button>
        </div>
      </div>


    <div class="grid">

        <!-- ***************************************
                            D
            **************************************** -->

        <div class="element-item d">
            <h6 class="name">D</h6>
        </div>

        <!-- ***************************************
                            P
            **************************************** -->

        <div class="element-item p" >
            <h6 class="name">P</h6>



    </div>


    <!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
    <!-- Isotope does NOT require jQuery. But it does make things easier -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

      <script src="js/isotope-docs.min.js?6"></script>


<!-- ***************Search filter*************** -->

      <script>
    // quick search regex
    var qsRegex;
    var buttonFilter;

    // init Isotope
    var $grid = $('.grid').isotope({
      itemSelector: '.element-item',
      layoutMode: 'fitRows',
      filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
      }
    });

    $('#filters').on( 'click', 'button', function() {
      buttonFilter = $( this ).attr('data-filter');
      $grid.isotope();
    });

    // use value of search field to filter
    var $quicksearch = $('#quicksearch').keyup( debounce( function() {
      qsRegex = new RegExp( $quicksearch.val(), 'gi' );
      $grid.isotope();
    }) );


      // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });


    // debounce so filtering doesn't happen every millisecond
    function debounce( fn, threshold ) {
      var timeout;
      threshold = threshold || 100;
      return function debounced() {
        clearTimeout( timeout );
        var args = arguments;
        var _this = this;
        function delayed() {
          fn.apply( _this, args );
        }
        timeout = setTimeout( delayed, threshold );
      };
    }

          </script>


<!-- ***************URL Filter ****************8-->

           <script>

      // external js: isotope.pkgd.js

// 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 = '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();</script>




    </body>
    </html>

同位素加入URL过滤器脚本

0 个答案: