同位素sortByValue

Question

我想我的產品排序，但這似乎沒有工作，我沒有錯誤的..我試圖做的是那種產品「名」和「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'); 
}); 
}); 
});