Question

我正在尝试实现Jquery Isotope。当我单击列表项中的过滤器时，没有任何反应。这些项目不会过滤或动画。如果有人可以提供帮助那就太棒了！谢谢！

HTML：

<!-- Case Selection List -->
<div id="list">
    <ul>
        <li><a href="#" class="selected" data-filter="*">All</a></li> 
        <li><a href="#" data-filter=".academic">Academic</a></li> 
        <li><a href="#" data-filter=".architecture">Architecture</a></li> 
        <li><a href="#" data-filter=".communication">Communication</a></li> 
        <li><a href="#" data-filter=".art">Art & Culture</a></li> 
        <li><a href="#" data-filter=".merchandising">Merchandising</a></li>
        <li><a href="#" data-filter=".entertainment">Entertainment</a></li> 
        <li><a href="#" data-filter=".design">Design</a></li> 
        <li><a href="#" data-filter=".industry">Industry</a></li>
        <li><a href="#" data-filter=".medical">Medical</a></li>
    </ul>
</div> <!-- List -->

<!-- ******Case Gallery Section****** --> 
<section class="casestudy section">
    <div class="container">
        <h2 class="title text-center">More customer success stories</h2>
        <div class="row">
             <div class="communication casestudy text-center col-md-4 col-sm-4 col-xs-12">
                 <h3 class="title"><span class=""><img class="img-responsive" src="assets/images/logos/loreal.jpg" alt="" /></span><br /><span class="text">L'Oreal</span></h3>
                 <p>Download the free Augment app on your <a href="https://itunes.apple.com/us/app/augment/id506463171?l=en&ls=1&mt=8" target="_blank">iPad, iPhone</a> or <a href="https://play.google.com/store/apps/details?id=com.ar.augment&feature=search_result" target="_blank">Android.</a></p>
             </div><!--//case-->
             <div class="merchandising casestudy text-center col-md-4 col-sm-4 col-xs-12">
                 <h3 class="title"><span><img class="img-responsive" src="assets/images/logos/loreal.jpg" alt="" /></span><br /><span class="text">Upload your 3D files</span></h3>
                 <p>Ask your designers or vendors to <a href="pricing.php">upload</a> your 3D designs on Augment Manager.</p>
             </div><!--//case-->
             <div class="entertainment casestudy text-center col-md-4 col-sm-4 col-xs-12">
                 <h3 class="title"><span><img class="img-responsive" src="assets/images/logos/loreal.jpg" alt="" /></span><br /><span class="text">Simulate your 3D models</span></h3>
                 <p>Watch our  <a style="cursor:pointer;" data-toggle="modal" data-target="#modal-video3">"Getting Started" video</a> to learn more about gestures, tracking and tools.</p>
             </div><!--//case-->
        </div><!--//row-->

    </div><!--//container-->        
</section><!--//steps-->

CSS

.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;
}

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; 
    }); 

});

Answer 1

我想你忘了添加jQuery库

这是一个有效的fiddle

Answer 2

您是否尝试在要排序/过滤的容器div上放置 data-category =“transition”？因为，根据Isotope的例子，你的代码似乎工作得很好......

并冒着重复自己的风险：如果您打开浏览器的Web工具包（F12），然后进入控制台，检查Javascript标签，您是否看到任何错误？

Jquery同位素过滤问题

2 个答案: