包含函数的同位素，该函数存储在变量中

问题描述

我正在使用Isotope.js库成功过滤项目。

到目前为止，使用data-filter=".cssclass"方法进行过滤没有问题。例如，在下面的简单代码段中，单击“ Odin”按钮，它将列表过滤为“ Odin”。再次单击“ Odin”按钮，它将删除过滤器。 “ Frigg”过滤器也是如此。

但是，当我尝试使用自定义函数（在这种情况下，是在div中搜索匹配文本）时，似乎无法使同位素识别出它。查看“ Thor”按钮-您会发现它没有像其他按钮一样选择css类，而是引用了函数“ searchthor”。

在jQuery中，我已将'searchthor'函数分配给变量'filterFns'as per the documentation here，这样，当我要求同位素进行过滤时，便可以轻松地调用它。该函数仅在元素中搜索“或”，如果它与过滤器运行匹配。

但是，当我尝试告诉同位素过滤css过滤器（var filter= $target.attr('data-filter');）并且还有任何功能filterFns时，它不起作用。文档说我应该将变量组合成这样：

var filterValue = $target.attr('data-filter');
filterValue = filterFns[ filterValue ] || filterValue

||的意思是“或” ...然后要求同位素对其进行过滤。但这不起作用：（

有人知道我如何使用我的搜索功能以及默认的CSS类（已经在工作）将同位素转化为ALSO吗？

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

// Assign var to my filter function that I want to get used as well when isotope runs
var filterFns = {
  // Filter if the title ends with the letters 'or'
  searchthor: function() {
    var name = $(this).find('.title').text();
    return name.match( /or$/ );
  }
};

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

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 filter buttons -->

<div id="excl_filters">
Exclusive filters:
    <button class="button" data-filter=".odin">Odin</button>
    <button class="button" data-filter=".frigg">Frigg</button>
        <button class="button" data-filter="searchthor">Thor</button>
  
</div>

<!-- end filter buttons -->

<br>

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

<div class="grid">
    
    <div class="element-item odin">Odin</div>
    <div class="element-item frigg">Frigg</div>
    <div class="element-item"><span class="title">Thor</span>

</div>

</div>

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

解决方法

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

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

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