带有下拉过滤器的URL哈希 - ISOTOPE

时间:2016-06-14 17:50:35

标签: javascript jquery html jquery-isotope isotope

我在Stack Overflow上检查了很多主题,但是我没有成功地从其他页面选择过滤器选项。

我做了一个jsfiddle https://jsfiddle.net/f0Ld07mv/2/

我的同位素脚本

    $(function(){

  var $container = $('#plaquettes_container'),
      filters = {};


  $container.isotope({
    itemSelector : '.plaquette_container',
    transitionDuration: 0,
  });

  // filter buttons
  $('select').change(function(){
    var $this = $(this);

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $this.attr('data-filter-group');

    filters[ group ] = $this.find(':selected').attr('data-filter-value');
    // console.log( $this.find(':selected') )
    // convert object into array
    var isoFilters = [];
    for ( var prop in filters ) {
      isoFilters.push( filters[ prop ] )
    }
    console.log(filters);
    var selector = isoFilters.join('');
    $container.isotope({ filter: selector });
    return false;
  });

      $('section_plaquettes ul>li').click(function() {
          var $this = $(this);
          var group = $this.parent().data('filter-group');
          filters[ group ] = $this.data('filter-value'); 
          var isoFilters = [];
            for ( var prop in filters ) {
              isoFilters.push( filters[ prop ] )
            }
            console.log(filters);
            var selector = isoFilters.join('');
            $container.isotope({ filter: selector });
            return false;
      });

});

我不知道如何在我的2下拉菜单中使用URL哈希:我在官方网站上发现了很多东西:http://codepen.io/desandro/pen/vErxX http://isotope.metafizzy.co/filtering.html

但是当我尝试适应我的同位素过滤器时,我不会成功,如果你们能帮助我,谢谢你!

0 个答案:

没有答案