javascript - Jquery 中的同位素过滤

Question

我正在尝试在 J 查询中创建过滤器，并且以下代码有效。但是我想实现它以与同位素过滤一起使用。

HTML:

    <div class="tags">
    <label><input type="checkbox" rel="flower" /> Flower </label>
    <label><input type="checkbox" rel="plants" /> Plants</label>
    <label><input type="checkbox" rel="beach" /> Beach </label>

  </div>

 <div class="photo plants flower " style="width:px; height:px;">
 Image 1            
 </div>
<div class="photo flower beach " style="width:px; height:px;">
 Image 2            
</div>

jQuery:

  $(function(){
    $('div.tags').delegate('input:checkbox', 'change', function() {
        var $lis = $('.photo').hide();
        //For each one checked 
        $('input:checked').each(function() {
                $lis.filter('.' + $(this).attr('rel')).show();
        });
    });
});

我无法使同位素过滤起作用。

这是 fiddle .

Answer 1

我不知道我是否理解正确你的问题，这是否对你有帮助

但这可能是一个解决方案 Fiddle

   <script type="text/javascript">
$(document).ready(function(){
  var $container = $('#container')
  var $checkboxes = $('div.tags input')
  $container.isotope({itemSelector: '.item'});
  $checkboxes.change(function(){
    var arr = [];
    $checkboxes.filter(':checked').each(function(){
      arr.push( this.value );
    });
    arr = arr.join(', ');
    $container.isotope({ filter: arr });
  });

});
</script>

如果此解决方案不能满足您的需求，很抱歉让您耽误了时间。