Сортировка с изотопом не работает

Question

Я довольно новичок в javascript, и я не могу понять, почему моя сортировка не работает. Фильтрационная часть работает нормально с небольшой проблемой (я не могу заставить ее сосредоточиться на моем портфолио раздела). Я прочитал все страницы Изотопа и даже несколько здесь, но ничто не соответствует моей проблеме.

Вот мой код, который в основном копируется форма Изотоп, я был бы очень признателен, если кто-то может помочь мне понять, почему это не работает:

<div id="sorts" class="button-group"> 
<button data-sort-by="original-order">original order</button> 
<button data-sort-by="name">name</button> 
<button data-sort-by="symbol">symbol</button> 
<button data-sort-by="number">number</button> 
<button data-sort-by="weight">weight</button> 
<button data-sort-by="category">category</button> 
</div> 

<section class="portfolio"> 
<article class="entry video"><img src="baldwin.jpg" alt=""/> 
<span class="magnifier"></span> 
<h3 class="name">Baldwin</h3> 
<p class="symbol">Hg</p> 
<p class="number">80</p> 
<p class="weight">200.59</p> 
</article> 
<article class="entry modern"> 
<img src="berkley.jpg" alt=""> 
<span class="magnifier"></span> 
<h3 class="name">Berkley</h3> 
<p class="symbol">Te</p> 
<p class="number">52</p> 
<p class="weight">127.6</p> 
</article> 

И мой JQuery:

<script> 
//sorting 
$(function() { 
var $container = $('.portfolio').isotope({ 
    itemSelector: '.entry', 
    layoutMode: 'fitRows', 
    transitionDuration: '0.6s', 
    getSortData: { 
    name: '.name', 
    symbol: '.symbol', 
    number: '.number parseInt', 
    weight: function(itemElem) { 
    var weight = $(itemElem).find('.weight').text(); 
    return parseFloat(weight.replace(/[\(\)]/g, '')); 
    } 
} 
// initial sortBy from button group 
// sortBy: $buttonGroup.find(':checked').val() 
}); 
$('#sorts').on('click', 'button', function() { 
var sortByValue = $(this).attr('data-sort-by'); 
$container.isotope({ sortBy: sortByValue }); 
}); 
}); 
//filtering 
var $container = $('.portfolio'); 
    $container.isotope({ 
     filter: '*', 
     animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false, 
    } 
}); 

$('nav.primary ul a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ 
     filter: selector, 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false, 
     } 
    }); 
    return false; 
    }); 

    var $optionSets = $('nav.primary ul'), 
     $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('nav.primary ul'); 
    $optionSet.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 
}); 
</script> 

Answer 1

У вас есть некоторые ошибки в вашем HTML и javascript. Я был в состоянии получить сценарий работы с ниже JS:

$(function() { 
    var $container = $('.portfolio').isotope({ 
    itemSelector: '.entry', 
    layoutMode: 'fitRows', 
    transitionDuration: '0.6s', 
    getSortData: { 
    name: '.name', 
    symbol: '.symbol', 
    number: '.number parseInt', 
    weight: function(itemElem) { 
     var weight = $(itemElem).find('.weight').text(); 
     return parseFloat(weight.replace(/[\(\)]/g, '')); 
     } 
    } 
// initial sortBy from button group 
// sortBy: $buttonGroup.find(':checked').val() 
}); 
    $('#sorts').on('click', 'button', function() { 
    var sortByValue = $(this).attr('data-sort-by'); 
    $container.isotope({ sortBy: sortByValue }); 
    }); 
}); 

Working Fiddle.

Вы потеряли $ в начале основной изотопной функции, а section не закрыт.

Я не уверен, что вы используете переменную 'ID' для или как вы вызываете эту функцию, но код выше будет работать.

Удачи вам!