使用Jquery和复选框过滤内容

Question

我正在尝试使用Jquery过滤一些内容，我有以下代码：

HMTL：

    <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>

J查询：

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

我无法让这段代码工作，因为我试图根据div类进行过滤，例如<div class="photo plants flower >

请参阅fiddle

Answer 1

你忘了添加jQuery库。 jsfiddle，并且您尝试访问不存在的元素$('.results > li')。没有li和result类

的元素

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