javascript - 同位素排序不起作用

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 .

您在主同位素函数的开头遗漏了 $，并且 部分 未关闭。

我不确定您使用变量“ID”做什么或如何调用该函数，但上面的代码可以工作。

祝你好运!