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

data-plugin-options filter is not working

本文关键字：工作 筛选 插件 选项 数据      更新时间：2023-09-26

我正在使用这个JessicaWhite免费的网络模板(http://www.html5xcss3.com/2014/02/jessicawhite-responsive-html5-theme.html)。我正在尝试在我的图像组合中设置一个过滤器，以便默认显示定义过滤器的图像，而不是所有图像。我尝试了很多方法（数据插件选项="｛"filter"：".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;
  });

});

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

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

将您的"过滤按钮"标记更改为以下内容-

<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');
});
相关文章：