Jquery用于筛选问题

我正在尝试实现Jquery。当我单击列表项中的过滤器时，什么也没有发生。这些项目不会过滤或设置动画。如果有人能帮忙，那就太好了！谢谢

Jfiddle：

HTML:

Jquery

$(document).ready(function() {

    var $container = $('.casestudy'); 
    $container.isotope({ 
        filter: '*', 
        animationOptions: { 
            duration: 750, 
            easing: 'linear', 
            queue: false, 
        } 
    }); 

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

});

---

我想你忘了添加

jQuery

库了

---

这是一个有效的

您是否尝试在要排序/筛选的containers div上放置一个data category=“transition”？因为，根据同位素示例，您的代码似乎运行良好

---

我冒着重复的风险：如果你打开浏览器的web toolkit（F12），进入控制台，检查Javascript选项卡，你看到任何错误吗？

当显示浏览器集成调试器的控制台（按页面上的F12键）并过滤以查看Javascript日志时，你看到任何错误吗？你能为我们创建一个合适的解决方案吗@giorgiowell您的小提琴不起作用，因为您没有包括jquery和同位素。。。你在自己的脚本中包含了这些吗？是的，对不起。我现在把同位素加入了JFIDLE。是的，我在自己的剧本中加入了。

.casestudy {
  padding-top: 60px;
  padding-bottom: 60px;
}
.casestudy .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 60px;
}
.casestudy .casestudy {
  padding: 30px 60px;
  color: #666666;
}
.casestudy .casestudy .title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
}
.casestudy .casestudy .title .number {
  width: 90px;
  height: 90px;
  display: block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-align: center;
  background: #ED2D25;
  border: 5px solid #ED2D25;
  color: #fff;
  margin: 0 auto;
  padding-top: 25px;
  font-size: 26px;
  font-weight: bold;
  font-family: arial, sans-serif;
  margin-bottom: 30px;
}
.casestudy .casestudy .title .text {
  color: #ED2D25;
  font-weight: bold;
  font-size: 16px;
}
.casestudy .btn-cta-primary {
  margin: 0 auto;
  margin-top: 0px;
  font-size: 20px;
}

$(document).ready(function() {

    var $container = $('.casestudy'); 
    $container.isotope({ 
        filter: '*', 
        animationOptions: { 
            duration: 750, 
            easing: 'linear', 
            queue: false, 
        } 
    }); 

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

});