Question

我有这段代码

<ul id="filters">
    <li>
        <input type="checkbox" value="96" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>

    <li>
        <input type="checkbox" value="97" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
</ul>

<div rel="96,97">A</div>

和jQuery

$("#filters :checkbox").click(function() {
       $("div").hide();
       $("#filters :checkbox:checked").join(',').each(function() {
           $('[rel='+$(this).val()+']').show();
       });
});

如果li的rel值为96或97和96,97

，我想显示div

我这样做但似乎没有工作

http://jsfiddle.net/6wYzw/634/

现在它正在显示http://jsfiddle.net/6wYzw/638，但只显示A和96或A和97，需要显示A和B时检查显示96 97和A（96,97 rel）

Answer 1

使用jQuery .map将所有项目转换为数组或对象。试试这个：

$("#filters :checkbox").click(function() {
       $("div").hide();
    var output = $.map($("#filters :checkbox:checked"), function(n, i){
      return n.value;
});
       $('[rel="'+output+'"]').show();
    $.each(output,function(i,v){
        $('[rel="'+v+'"]').show();        
    });
});

<强> DEMO

Answer 2

$('[rel]').hide();// if initially div should be hidden otherwise remove
$("#filters :checkbox").click(function() {

    if($("#filters :checkbox").eq(1).is(":checked")||$("#filters :checkbox").eq(0).is(":checked")){
        $('[rel]').show();
    }
    else
    {
        $('[rel]').hide();
    }

});

用逗号分隔rel

2 个答案: