0

我有大约 150 个列表项，每个列表项都有我想要过滤的数据属性。对于初学者，我只想有一个复选框来查看一个数据属性，并且只能显示与其关联的列表项。

我真的迷路了，因为我还是个新手。似乎找不到任何东西，也许我正在寻找错误的术语。

<div class="container">
    <input name="Fluid Width" type="checkbox"><span>Fluid</span>
</div>
<ul id="myList">
<li data-width-type='Fixed Width' data-carousel='No' data-columns='3'>Adventure</li>
<li data-width-type='Fixed Width' data-carousel='No' data-columns='3'>Antiques</li>
<li data-width-type='Fluid Width' data-carousel='No' data-columns='3'>ArtFraming</li>
<li data-width-type='Fluid Width' data-carousel='No' data-columns='3'>ArtsCrafts</li>
<li data-width-type='Fluid Width' data-carousel='No' data-columns='3'>Automotive</li>
</ul>

Javascript：

$(function(){
var list = $('#myList')

$('.container').on('change','.filter',function() {

});
});

小提琴：http: //jsfiddle.net/vEzdC/

关于我应该寻找或尝试什么的提示？

4

2 回答 2

0

你可以.filter()这样使用：

$(function(){
   $('.container').on('change',function() {
        var $in=$("input:checkbox",this);
        $("#myList li").filter(function(index){
        return !($(this).data("width-type") == $in.attr("name"));
        }).toggle();
    });
});

演示小提琴

于 2013-09-28T06:14:49.097 回答
0 
$(function(){ 
    $('.container input:checkbox').on('change',function() {
           $("#myList [data-width-type!='"+this.name+"']").toggle();
    });
});

演示：http: //jsfiddle.net/vEzdC/6/

于 2013-09-28T05:59:45.263 回答