Isotope.js定制功能问题

问题描述

我正在使用Metafizzy's Isotope library过滤砖石网格中的项目。

除默认功能外，我还包括一些自定义功能，这些功能使用户可以“切换”过滤器，“重置”所有过滤器，最后根据所使用的过滤器组来“排他”或“排他”被激活（请参阅突出显示该自定义的代码中的注释）。

目前一切正常，请查看下面的代码片段，以超级简化和简短的演示方式展示此设置在其当前工作状态。

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',});

// store filter for each group
var filters = [];

// change is-checked class on buttons for exclusive filters
var $filters = $('#excl_filters').on( 'click','button',function( event ) {
  var $target = $( event.currentTarget );
  $target.toggleClass('is-checked');
  var isChecked = $target.hasClass('is-checked');
  var filter = $target.attr('data-filter');
  if ( isChecked ) {
    addFilter( filter );
  } else {
    removeFilter( filter );
  }
  // filter isotope
  // group filters together,exclusive
  $grid.isotope({ filter: filters.join('') });
});

// change is-checked class on buttons FOR inclusive filters
var $filtersincl = $('#incl_filters').on( 'click',inclusive
  $grid.isotope({ filter: filters.join(',') });
});

// reset all filters
$('.reset-button').on( 'click',function() {
  // reset filters collection
  filters = [];
  // reset filter buttons
  $filters.find('.is-checked').removeClass('is-checked');
  $filtersincl.find('.is-checked').removeClass('is-checked');
  // reset Isotope
  $grid.isotope({ filter: '*' });
});

function addFilter( filter ) {
  if ( filters.indexOf( filter ) == -1 ) {
    filters.push( filter );
  }
}

function removeFilter( filter ) {
  var index = filters.indexOf( filter);
  if ( index != -1 ) {
    filters.splice( index,1 );
  }
}

.is-checked {
  font-weight: bold;
}

<!-- Include jQuery and Isotope libraries -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>

<!-- start inclusive filters -->

<div id="incl_filters">
Inclusive filters :
    <button class="button" data-filter=".apples">Apples</button>
    <button class="button" data-filter=".pears">Pears</button>
    <button class="button" data-filter=".oranges">Oranges</button>
  
</div>

<!-- end inclusive filters -->

<!-- start exclusive filters -->

<div id="excl_filters">
Exclusive filters:
    <button class="button" data-filter=".crunchy">Crunchy</button>
    <button class="button" data-filter=".sweet">Sweet</button>
    <button class="button" data-filter=".sour">Sour</button>
  
</div>

<!-- end exclusive filters -->

<br>

<!-- start items to be filtered -->

<div class="grid">
    
    <div class="element-item apples crunchy">Apples</div>
    <div class="element-item pears sweet">Pears</div>
    <div class="element-item oranges sour">Oranges</div>

</div>

<!-- end items to be filtered -->

<br>

<!-- start reset all filters -->
<button class="button reset-button">Reset filters</button>
<!-- end reset all filters -->

从现在开始，我想尝试添加一些附加功能，但是任务变得太复杂了，我发现自己迷失在使用不同约定和思想实现其单一目的的不同演示/代码笔之中，并且没有知道如何在我的脚本中整体正确地实现它们...

下面，我将描述一些我想知道如何与当前脚本协同工作的功能（并提供独立的示例），但到目前为止却失败了：

• URL hashing & Echoing the currently selected filters in a div我可以让其中的一个或两个工作，之后一切都会中断。
• Quick search使用正则表达式看起来很简单，但它不想使用我当前的代码。
• Custom functions例如，请参阅名为“数字> 50”和“名称以-ium结尾”的过滤器。我不知道在$ grid.isotope（）;时如何包括这些函数。被称为重新排列网格。

有人知道我可以从哪里开始将这四个^自定义功能合并到我已经拥有的功能中吗？非常感谢您阅读。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）