Javascript 数据插件选项筛选器不工作

我正在使用这个JessicaWhite免费webtemplate（）。我试图在我的图像公文包中设置一个过滤器，以便在默认情况下显示已定义过滤器的图像，而不是所有图像。 我尝试过很多方法（数据插件选项=“{”过滤器“：.category01”）），但没有成功

HTML:

---

根据以下注释，尝试以下操作：

从您的公文包项目中删除“数据类别”属性，该属性未被使用

将“筛选按钮”标记更改为以下内容-

<ul id="filters">
  <li><a class="filter-button" href="#filter" data-filter="*" class="btn btn-mini">All</a></li>
  <li><a class="filter-button" href="#filter" data-filter=".category01" class="btn btn-mini selected">Category01</a></li>
  <li><a class="filter-button" href="#filter" data-filter=".category02" class="btn btn-mini">Category02</a></li>
</ul>

---

嗨，唐尼，谢谢你的建议。不幸的是，将过滤器更改为选项并没有帮助。你认为JS文件应该按照“动态生成选项对象”的注释进行修改吗？肯定有一些恶作剧会导致这个问题。作为第一步，试着注释掉“else”中的行结尾的语句：$container.isotox（options）；。这至少应该告诉我们在初始加载时过滤是否会按预期工作。如果是这样，那么我们需要更改该区域中的一些JS，以便在用户单击链接时启用过滤。当我按建议注释时，然后手动过滤（通过鼠标光标单击）不再工作。正确…但是投资组合最初加载时应用了“category 01”过滤器吗？不，仍然是“all”

/* SORTING */ 

$(function(){

  var $container = $('.projects');

  $container.isotope({
    itemSelector : '.element'
  });

  var $optionSets = $('#options .option-set'),
      $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // make option object dynamically, i.e. { filter: '.my-filter-class' }
    var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');
    // parse 'false' as false boolean
    value = value === 'false' ? false : value;
    options[ key ] = value;
    if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
      // changes in layout modes need extra logic
      changeLayoutMode( $this, options )
    } else {
      // otherwise, apply new options
      $container.isotope( options );
    }

    return false;
  });


});

<ul id="filters">
  <li><a class="filter-button" href="#filter" data-filter="*" class="btn btn-mini">All</a></li>
  <li><a class="filter-button" href="#filter" data-filter=".category01" class="btn btn-mini selected">Category01</a></li>
  <li><a class="filter-button" href="#filter" data-filter=".category02" class="btn btn-mini">Category02</a></li>
</ul>

var $projects = $('.projects').isotope({
  filter: '.category 01'
});

$('.filter-button').on( 'click', function() {
  var filteredVal = $(this).attr('data-filter');
  $projects.isotope({ filter: filteredVal });
  $('.filter-button.selected').removeClass('selected');
  $(this).addClass('selected');
});