获取 rel 以逗号分隔

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

});