jQuery为什么我的函数不能从数组执行？

问题描述

我有一些分配给变量filterFns的功能：

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 -or
  endswithor: function() {
    var name = $(this).find('.title').text();
    return name.match( /or$/ );
  }
};

我有一个分配给变量filters的数组：

var filters = [];

我有一个脚本，单击该按钮后，会将单击按钮的data-target属性的数据添加（或删除）到filters数组中。然后将此数组发送到isotope.js，它做了一些不错的布局工作。

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

// send the array to isotope for filtering.

$grid.isotope({ filter: filters.join('') });
  
// For debugging purposes,print what is in the 'filters' array. 

    $.each(filters,function(key,value){
      $("#debug").append(value + '<br>');
    });

});

// These are to add/remove stuff from the array

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

我看到单击按钮时，endswithor（我的函数的名称）数据已传递到数组（通过在#debug中打印数组数据来证明）。

为什么为什么不执行“ endswithor”功能？

请参见下面的代码段/简化示例：

  // init Isotope
    var $grid = $('.grid').isotope({
    itemSelector: '.element-item',}); 
  
  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 -or
      endswithor: function() {
        var name = $(this).find('.title').text();
        return name.match( /or$/ );
      }
  };

    var filters = [];


  var $filters = $('#excl_filters').on( 'click',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 );
      }
    
    // Send the array to isotope for filtering.

    $grid.isotope({ filter: filters.join('') });
      
    // For debugging purposes,print what is in the 'filters' array. 

        $.each(filters,value){
          $("#debug").append(value + '<br>');
        });

    });

    // These are to add/remove stuff from the array

    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>

Instructions: Click the 'Thor' button (the one that is supposed to make function execute) and note the debugging area.
Note that the 'endswithor' function is passed to array,but the 'Thor' div does not display (because the function does not execute).
<br><br>
<!-- 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="endswithor">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 -->

<!-- debugging -->

<br>

------------------<br>
Debugging (contents of the array):
<div id="debug"></div>
------------------<br>
<br>
Note that the other filters are working (the ones that use css classes) but not the one which uses my function 'searchthor'.

解决方法

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

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

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