Question

我正在使用这个JessicaWhite免费webtemplate（http://www.html5xcss3.com/2014/02/jessicawhite-responsive-html5-theme.html）。我试图在我的图像组合中设置一个过滤器，以便默认显示已定义过滤器的图像，而不是所有图像。我尝试了很多东西（数据 - 插件 - 选项=＆＃39; {＆＃34;过滤器＆＃34;：＆＃34; .category01＆＃34;）＆＃39;），但没有运气。< / p>

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>

我也尝试过切换＆＃39;为＆＃34;在data-plugin-options中，但没有运气。

这是JS for＆＃34; option-set＆＃34;：

/* 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

根据以下评论，请尝试以下方法：

删除＆＃39;数据类别＆＃39;您的投资组合项目中的属性，未被使用。

更改“过滤器”按钮＆＃39;标记到以下 -

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

评论整个＆＃34;排序＆＃34; 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');
});

data-plugin-options过滤器无法正常工作

1 个答案: