Isotope 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 (это было в версии 1.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'); 
}); 
}); 
});