1

我正在尝试让产品过滤器工作，它几乎就在那里。我希望用户能够选择衬衫，然后显示所有衬衫，然后显示蓝色，显示所有蓝色衬衫，然后在他们检查粉红色时显示所有蓝色和粉红色衬衫。目前我只能让它显示所有条件是否为真，但我希望它显示任何数据集是否为真

我的小提琴在这里

http://jsfiddle.net/ktcle/2keVN/2/

$('div.tags').delegate('input[type=checkbox]', 'change', function()
{
var $lis = $('.results > li'),
    $checked = $('input:checked');

if ($checked.length)
{
    var selector = $checked.map(function ()
    {
        return '.' + $(this).attr('rel');
    }).get().join('');

    $lis.hide().filter(selector).show().addClass("show");     
}
else
{
    $lis.show().removeClass("show");
}
});
4

2 回答 2

0

试试这个：

编辑：我已经修改了能够专门过滤的方法。这样，您就可以过滤绿色或粉色的衬衫和裤子。

$(function(){
    $('div.tags').delegate('input[type=checkbox]', 'change', function()
    {
        var $lis = $('.results > li'),
            $types = $('.filter-grp-type input:checked'),
            $colors = $('.filter-grp-color input:checked');

        if ($types.length)
        {
            var selector = $types.map(function ()
            {
                return '.' + $(this).attr('rel');
            }).get().join(', ');

            $lis.hide().filter(selector).show();     
        }
        else
        {
            $lis.show();
        }

        $lis = $lis.filter(":visible");

        if ($colors.length)
        {
            var selector = $colors.map(function ()
            {
                return '.' + $(this).attr('rel');
            }).get().join(', ');

            $lis.hide().filter(selector).show();     
        }
    });
})

当您构建“选择器”字符串时，您只是将它连接起来。然后，jQuery 将只过滤那些在您的选择器中具有所有类的项目。

我同意大卫托马斯的观点。而是使服装类型的选择相互排斥，即单选按钮。

于 2012-07-09T14:00:39.110 回答
0

我建议首先更改您的 HTML，以反映您只想选择一种服装类别（所以使用<input type="radio" />）：

  <div class="tags">
   <fieldset class="filter-grp">
    <label><input type="radio" rel="skirt" name="year" /> skirt </label><br>
    <label><input type="radio" rel="trousers" name="year" /> trousers </label><br>
    <label><input type="radio" rel="shirt" name="year" /> shirt </label><br>
    </fieldset>
  <br>
  <fieldset class="filter-grp">
    <label><input type="checkbox" rel="blue" name="type"  /> blue</label><br>
    <label><input type="checkbox" rel="pink" name="type"  /> pink</label><br>
    <label><input type="checkbox" rel="green" name="type"  /> green</label><br>
   </fieldset>
   <br>
</div>

<ul class="results">
   <li class="blue skirt"> blue skirt</li>
   <li class="pink shirt">pink shirt</li>
   <li class="pink skirt">pink skirt</li>
   <li class="blue shirt">blue shirt</li>
   <li class="blue trousers">blue trousers</li>
   <li class="green skirt">green skirt</li>
   <li class="blue shirt">blue shirt</li>
   <li class="pink trousers">pink trousers</li>
   <li class="blue trousers">blue trousers</li>
   <li class="blue skirt">blue skirt</li>
   <li class="green shirt">green shirt</li>
</ul>    ​

使用以下 jQuery：

$(function() {
    $('div.tags').delegate('input[type=checkbox],input[type=radio]', 'change', function() {
        var $lis = $('.results > li'),
            $category = $('input:radio:checked')
            .attr('rel'),
            $colors = $('input:checkbox:checked'),
            selectors = $colors.map(
                function(){
                    return '.' + $category + '.' + $(this).attr('rel');
                }).get().join(', ');
        if ($category.length && $colors.length) {
                        $lis
                            .hide()
                            .filter(selectors)
                            .show()
                            .addClass("show");
        }
        else {
            $lis.show().removeClass("show");
        }
    });
})​​

JS 小提琴演示。

于 2012-07-09T14:03:47.650 回答