使用Jquery和复选框过滤内容

时间:2014-04-21 09:42:28

标签: javascript jquery

我正在尝试使用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

1 个答案:

答案 0 :(得分:0)

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

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