Javascript 同位素过滤器动画在第一次单击时不起作用

我正在学习HTML5/CSS，虽然我的同位素过滤工作几乎完美，但还是有一个小错误

默认情况下设置为“全部”，当我单击任何其他选项时，当它们被正确过滤时，动画不会触发。在那之后，一切都很好，只是第一次点击才是问题所在

任何帮助或想法都将不胜感激

以下是相关的HTML和css：

  <div class="container-fluid filterable-portfolio">
        <div class="row">
           <div class="col-md-12">
              <ul class="nav nav-pills portfolio filter">
                 <li class="portfolio-title">Filter by:</li>
                 <li role="presentation" class="active"><a href="#" data-filter="*">All</a></li>
                 <li role="presentation"><a href="#"data-filter=".school">School Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".personal">Personal Projects</a></li>
                 <li role="presentation"><a href="#"data-filter=".unity">Unity Projects</a></li>
              </ul>
           </div>
        </div>
        <div class="row portfolio-items">
           <figure class="portfolio-item col-sm-4 school">
              <a href="#">
              <img src="http://placekitten.com/700/400" class="img-responsive">
              </a> /* this bit of code has several more instances, but i cut them to save space for asking this question */

以下是js：

// init Isotope
var $container = $('.portfolio-items').isotope('layout');

// filter items on button click
$('.portfolio.filter').on( 'click', 'a', function(e) {
e.preventDefault();
var filterValue = $(this).attr('data-filter');
$container.isotope({ filter: filterValue });

//$('.portfolio-filter li').removeClass('active');
//$(this).closest('li').addClass('active');
});

---

此代码对我来说运行良好。

var $portfolio_filter = $('.portfolio-items').isotope();    
$grid_selectors = $('.portfolio.filter > li > a');
$grid_selectors.on('click', function () {
    $grid_selectors.parent().removeClass('active');
    $(this).parent().addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio_filter.isotope({filter: selector}).isotope( 'reloadItems' ).isotope();
    return false;
});

---

此代码对我来说运行良好。

var $portfolio_filter = $('.portfolio-items').isotope();    
$grid_selectors = $('.portfolio.filter > li > a');
$grid_selectors.on('click', function () {
    $grid_selectors.parent().removeClass('active');
    $(this).parent().addClass('active');
    var selector = $(this).attr('data-filter');
    $portfolio_filter.isotope({filter: selector}).isotope( 'reloadItems' ).isotope();
    return false;
});

---

用于实例化和设置同位素实例属性的JS在哪里？您的问题可能不是CSS，甚至不是HTML，而是JS中的点击处理程序。听起来像是订购问题。请把完整的代码贴出来。我们需要一个我已经编辑过的原始显示JS代码以及。我的错！您仍然没有显示用于实例化和设置同位素实例属性的JS<代码>var$container=$（'.portfolio items'）。同位素（'layout'）不是。用于实例化和设置同位素实例属性的JS在哪里？您的问题可能不是CSS，甚至不是HTML，而是JS中的点击处理程序。听起来像是订购问题。请把完整的代码贴出来。我们需要一个我已经编辑过的原始显示JS代码以及。我的错！您仍然没有显示用于实例化和设置同位素实例属性的JS<代码>var$container=$（'.portfolio items'）。同位素（'layout'）不是吗。