Question

我有大约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/

我应该搜索或尝试的提示？

Answer 1

$(function(){ 
    $('.container input:checkbox').on('change',function() {
           $("#myList [data-width-type!='"+this.name+"']").toggle();
    });
});

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

Answer 2

您可以这样使用.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();
    });
});

演示Fiddle

基于复选框显示/隐藏列表项（过滤）

2 个答案: