Question

我正在努力让产品过滤器正常工作。我希望用户能够选择衬衫，然后显示所有衬衫，然后是蓝色，显示所有蓝色衬衫，然后在他们检查粉红色，它显示所有蓝色和粉红色衬衫。目前我只能让它显示所有条件是否都是真的，但我希望它显示该数据集是否为真

我的小提琴在这里

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

Answer 1

试试这个：

编辑：我已修改该方法，以便能够专门过滤。通过这种方式，您可以按照绿色或粉红色的衬衫和裤子进行过滤。

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

当你构建你的＆＃34;选择器＆＃34;字符串，你只是连接它。然后jQuery将只过滤那些在选择器中包含所有类的项目。

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

Answer 2

我建议您首先更改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 Fiddle demo

产品过滤器使用if或

2 个答案: