Question

我是javascript的新手，我无法弄清楚为什么我的排序不起作用。过滤部分工作正常，有一个小问题（我似乎无法让它以我的部分“投资组合”为中心）。我已经阅读了所有的Isotope页面，甚至多个在这里，但没有任何东西符合我的问题。

这是我的代码，基本上是从Isotope复制的，如果有人可以帮我弄清楚为什么这不起作用，我真的很感激：

<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尚未关闭。

我不确定您使用变量＆＃39; ID＆＃39;对于或如何调用该函数，但上面的代码可以正常工作。

祝你好运！

使用同位素排序不起作用

1 个答案: