同位素sortByValue

Question

我正在试着对我的产品进行分类，但这似乎不起作用，我没有错误的..我想做的是用"name“和"fname”对产品进行排序。

<div class="w-filters">
<div class="w-filters-item active" data-sort-by="*">All</div>
<div class="w-filters-item" data-sort-by=".name">Name</div>
<div class="w-filters-item" data-sort-by=".fname">FolderName</div>
</div>

使用此jQuery

jQuery('.w-portfolio.type_sortable').each(function(index, container){
    var $container = jQuery(container),
        $list = $container.find('.w-portfolio-list'),
        $sortItems = $container.find('.w-filters-item');
        $container.imagesLoaded(function(){
        $list.isotope({
            itemSelector: '.w-portfolio-item',
            layoutMode: 'fitRows',
            getSortData: {
                name: '.name',
                fname: '.fname',
            }
        });
        $sortItems.click(function(){
                var $item =  $item.attr('data-sort-by');
                if ($item.hasClass('active')) return;
                $sortItems.removeClass('active');
                $item.addClass('active');
                $list.isotope({ 
                    sortBy: sortByValue
                });
            });
        });
});

有人知道怎么解决这个问题吗？

Answer 1

你的小提琴有一些问题。你可以将你的库添加到“外部资源”下，而不是在javascript窗格中，因为它很难看到你的代码。此外，imagesLoaded.js不是同位素v2 (在v1.56中)的一部分，因此您也需要将其包括在内。此外，没有排序“全部”，这是为了过滤，所以我添加了原始顺序代替。我对你的代码做了一些重写。下面是有效的jsfiddle

  jQuery('.w-portfolio.type_sortable').each(function(){
  var $list = jQuery('.w-portfolio-list'),
    $sortItems = jQuery('.w-filter');
    $list.imagesLoaded(function(){
    $list.isotope({
        itemSelector: '.w-portfolio-item',
        layoutMode: 'fitRows',
        getSortData: {
            name: '.name',
            fname: '.fname'
        }
    });
    $sortItems.on('click','div',function(){
        var sortByValue = jQuery(this).attr('data-sort-by');
$list.isotope({ sortBy: sortByValue });               
        });
   });

 $sortItems.each( function( i, sortGroup ) {
var $sortGroup = jQuery( sortGroup );
$sortGroup.on( 'click', 'div', function() {
  $sortGroup.find('.active').removeClass('active');
  jQuery( this ).addClass('active');
});
});
});