Javascript jQuery（同位素）-组合筛选和排序

我在使用jQuery同位素库进行排序时遇到问题。简单地说，它不排序

这里以同位素为例，查看中的多个复选框。为了帮助排序，我在每个div中添加了一些数据，以便我们进行排序。在处理给定的排序时，请尝试添加此功能。但是我甚至不能让同位素的排序函数工作，即使在文档准备的开始阶段。你知道为什么它不会排序吗

下面是我的示例代码：

下面是相关的javascript：

$(function(){

  $container = $('#container');

  createContent();

  var $filterDisplay = $('#filter-display');

  $container.isotope();
  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );

    var comboFilter = getComboFilter( filters );

    $container.isotope({ filter: comboFilter });

    $filterDisplay.text( comboFilter );
  });

  var $grid = $('.grid').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows',
    getSortData: {
      color: '[data-color]',
      number: '[data-number]'
    },
    // sort by color then number
    sortBy: [ 'color', 'number' ]
  });

  // bind sort button click
  $('.sort-by-button-group').on( 'click', 'button', function() {
    var sortValue = $(this).attr('data-sort-value');
    // make an array of values
    sortValue = sortValue.split(',');
    $grid.isotope({ sortBy: sortValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });

});


var data = {
  brands: 'brand1 brand2 brand3 brand4'.split(' '),
  productTypes: 'type1 type2 type3 type4'.split(' '),
  colors: 'red blue yellow green'.split(' '),
  sizes: 'uk-size8 uk-size9 uk-size10 uk-size11'.split(' ')
};

function createContent() {
  var brand, productType, color, size;
  var items = '';
  // dynamically create content
  for (var i=0, len1 = data.brands.length; i < len1; i++) {
    brand = data.brands[i];
    for (var j=0, len2 = data.productTypes.length; j < len2; j++) {
      productType = data.productTypes[j];
        for (var l=0, len3 = data.colors.length; l < len3; l++) {
        color = data.colors[l];
        for (var k=0, len4 = data.sizes.length; k < len4; k++) {
          size = data.sizes[k];
          var itemHtml = '<div class="item ' + brand + ' ' +
            productType + ' ' + color + ' ' + size + '">' +
            '<p>' + brand + '</p>' +
            '<p>' + productType + '</p>' +
            '<p>' + size + '</p>' +
            '</div>';
            items += itemHtml;
        }
      }
    }
  }

  $container.append( items );
}


function getComboFilter( filters ) {
  var i = 0;
  var comboFilters = [];
  var message = [];

  for ( var prop in filters ) {
    message.push( filters[ prop ].join(' ') );
    var filterGroup = filters[ prop ];
    // skip to next filter group if it doesn't have any values
    if ( !filterGroup.length ) {
      continue;
    }
    if ( i === 0 ) {
      // copy to new array
      comboFilters = filterGroup.slice(0);
    } else {
      var filterSelectors = [];
      // copy to fresh array
      var groupCombo = comboFilters.slice(0); // [ A, B ]
      // merge filter Groups
      for (var k=0, len3 = filterGroup.length; k < len3; k++) {
        for (var j=0, len2 = groupCombo.length; j < len2; j++) {
          filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
        }

      }
      // apply filter selectors to combo filters for next group
      comboFilters = filterSelectors;
    }
    i++;
  }

  var comboFilter = comboFilters.join(', ');
  return comboFilter;
}

function manageCheckbox( $checkbox ) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[ group ];
  if ( !filterGroup ) {
    filterGroup = filters[ group ] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if ( isAll ) {
    delete filters[ group ];
    if ( !checkbox.checked ) {
      checkbox.checked = 'checked';
    }
  }
  // index of
  var index = $.inArray( checkbox.value, filterGroup );

  if ( checkbox.checked ) {
    var selector = isAll ? 'input' : 'input.all';
    $checkbox.siblings( selector ).removeAttr('checked');


    if ( !isAll && index === -1 ) {
      // add filter to group
      filters[ group ].push( checkbox.value );
    }

  } else if ( !isAll ) {
    // remove filter from group
    filters[ group ].splice( index, 1 );
    // if unchecked the last box, check the all
    if ( !$checkbox.siblings('[checked]').length ) {
      $checkbox.siblings('input.all').attr('checked', 'checked');
    }
  }

}

$（函数（）{
$container=$（“#container”）；
createContent（）；
变量$filterDisplay=$（“#过滤器显示”）；
$container.同位素（）；
//当复选框改变时做一些事情
$（'#options'）。打开（'change'，函数（jQEvent）{
var$checkbox=$（jQEvent.target）；
manageCheckbox（$checkbox）；
var comboFilter=getComboFilter（过滤器）；
$container.同位素（{filter:comboFilter}）；
$filterDisplay.text（组合过滤器）；
});
变量$grid=$（'.grid'）。同位素({
itemSelector:“.item”，
布局模式：“fitRows”，
getSortData：{
颜色：“[数据颜色]”，
编号：“[数据编号]”
},
//按颜色排序，然后按数字排序
排序：['颜色'，'数字']
});
//绑定排序按钮单击
$（'.sort by button group'）。在（'click'，'button'，function（）上{
var sortValue=$（this.attr（'data-sort-value'）；
//制作一个值数组
sortValue=sortValue.split（'，'）；
$grid.同位素（{sortBy:sortValue}）；
});
//在类按钮上选中更改
$（'.button组'）。每个（函数（i，button组）{
变量$buttonGroup=$（buttonGroup）；
$buttonGroup.on（'click'，'button'，function（）{
$buttonGroup.find（'.is-checked'）.removeClass（'is-checked'）；
$（this.addClass（'is-checked'）；
});
});
});
风险值数据={
品牌：“品牌1品牌2品牌3品牌4”。拆分（“”），
productTypes:'type1 type2 type3 type4'。拆分（“”），
颜色：“红蓝黄绿”。分割（“”），
尺码：“uk-size8 uk-size9 uk-size10 uk-size11”。拆分（“”）
};
函数createContent（）{
var品牌、产品类型、颜色、尺寸；
var项目=“”；
//动态创建内容
对于（变量i=0，len1=data.brands.length；i”+
“”+productType+”
”+
“”+size+”
”+
'';
items+=itemHtml；
}
}
}
}
$container.append（项目）；
}
函数getComboFilter（过滤器）{
var i=0；
var-comboFilters=[]；
var消息=[]；
用于（过滤器中的var prop）{
message.push（过滤器[prop].join（“”））；
var filterGroup=过滤器[prop]；
//如果没有任何值，请跳到下一个筛选器组
如果（！filterGroup.length）{
继续；
}
如果（i==0）{
//复制到新阵列
comboFilters=filterGroup.slice（0）；
}否则{
var filterSelectors=[]；
//复制到新数组
var groupCombo=comboFilters.slice（0）；//[A，B]
//合并筛选器组
for（var k=0，len3=filterGroup.length；k

我认为这是因为您无法对类进行排序

没有声明任何值。我应该是

<div class="element-item transition metal" data-category="transition">
  <p class="number">79</p>
  <h3 class="symbol">Au</h3>
  <h2 class="name">Gold</h2>
  <p class="weight">196.966569</p>
</div>

79
金
黄金
196.966569