数据插件选项筛选器无法工作。

Question

我正在使用这个JessicaWhite免费网页模板(http://www.html5xcss3.com/2014/02/jessicawhite-responsive-html5-theme.html)。我试图在我的图像组合中设置一个过滤器，以便在默认情况下显示已定义的过滤器的图像，而不是所有的图像。我尝试过很多东西(数据插件-选项={“过滤器”：“.category01”)，但没有成功。

HTML：

<ul id="filters" class="option-set" data-option-key="filter" data-plugin-options='{"filter": ".category01"}'>

<li><a href="#filter" data-option-value="*" class="btn btn-mini selected">All</a></li>

<li><a href="#filter" data-option-value=".category01" class="btn btn-mini">Category01</a></li>   

<li><a href="#filter" data-option-value=".category02" class="btn btn-mini">Category02</a></li>

</ul> 

我也尝试过切换“for”内的数据插件选项，但没有运气。

以下是“选项集”的JS：

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


});

Answer 1

根据下面的评论，请尝试如下：

从你的投资组合项目中删除‘数据类别’属性，它不会被使用。

将“筛选按钮”标记更改为-

<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函数，并替换为-

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