1

我正在尝试为商店组合一个简单的 jQuery 产品过滤器，该商店在一个页面上列出了一个类别的所有产品。由于商店的设置方式，这无法通过 AJAX 实现。

简而言之，该类别的所有产品都在一个页面上。他们有不同的品牌产品名称和团队名称。标记看起来像这样（最后的表格是我打算如何进行过滤器）。

<div id="CategoryContent">
<ul>

<li class="product">Brand1 PRODUCT1 TeamA</li>
<li class="product">Brand1 PRODUCT2 TeamB</li>
<li class="product">Brand2 PRODUCT3 TeamB</li>
<li class="product">Brand2 PRODUCT4 TeamC</li>
<li class="product">Brand3 PRODUCT5 TeamA</li>
<li class="product">Brand3 PRODUCT6 TeamD</li>
<li class="product">Brand4 PRODUCT7 TeamD</li>
<li class="product">Brand1 PRODUCT8 TeamA</li>
<li class="product">Brand1 PRODUCT9 TeamA</li>
<li class="product">Brand1 PRODUCT10 TeamB</li>
<li class="product">Brand4 PRODUCT11 TeamD</li>
<li class="product">Brand2 PRODUCT12 TeamA</li>
</ul>

<div style="clear:both;"></div>
<div class="filter">
<form id= "brandfilter" action="">
    <h2>Brands:</h2>
<input type="checkbox" name="brand" value="Brand1"/>Brand1 </br>
<input type="checkbox" name="brand" value="Brand2"/>Brand2 </br>
<input type="checkbox" name="brand" value="Brand3"/>Brand3 </br>    
<input type="checkbox" name="brand" value="Brand1"/>Brand4 </br>
</form>
<form id="teamfilter" action="">
<input type="checkbox" name="team" value="TeamA"/>TeamA </br>
<input type="checkbox" name="team" value="TeamB"/>TeamB </br>
<input type="checkbox" name="team" value="TeamC"/>TeamC </br>
<input type="checkbox" name="team" value="TeamD"/>TeamD </br>
</form>

我发现这个过滤器可以按我的意愿工作。在控制台中，将 hide 替换为 show 并将 Brand1 替换为 Brand2、TeamA 等工作得很好。

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1)")
).hide();

下一步是获得一个同样有效的双过滤器：

$("#CategoryContent li").not(
$("#CategoryContent li:contains(Brand1):contains(TeamA)")
).hide();

我让这个工作的问题是双重的。1 用变量替换 Brand1 / Team A（因此是formids）。

第二个是在单击复选框时尝试运行脚本。如果单击任何一个并且同时单击两者，它应该可以工作（这意味着对于上面的脚本，它需要通过显示全部然后隐藏来重置）。

目前要启动它，我正在运行这个脚本，但我遇到了问题，所以我只使用了 1 个过滤器。

$("input:checkbox[name='brand']").click(function() {
    var brandfilter = $(this).val();
    alert (brandfilter);
    $("#CategoryContent li:contains('  + brandfilter + ')").parent().hide();
});

弹出的警报是我想要的（即 Brand1），但之后的隐藏功能不起作用，当我alert (brandfilter)再次在控制台中时，我得到[object HTMLFormElement]. 所以我认为变量没有正确存储或什么？

这是简单的工作基本脚本http://jsfiddle.net/7gYJc/

4

4 回答 4

1

假设您要显示与任何当前选中的框匹配的项目，您可以使用以下命令：

$('input:checkbox').change(showHideProducts);

function showHideProducts()
{
    var checked = $('input:checked');
    var products = $('.product');

    // If all the boxes are unchecked, show all the products.
    if (checked.length == 0)
    {
        products.show();
    }
    else
    {
        products.hide();
        checked.each
        (
            function()
            {
                $('.product:contains("' + $(this).val() + '")').show();
            }            
        );
    }
}​

编辑：由于您希望在未选中任何内容时显示所有框，因此只需添加一个 if (length = 0) 检查并显示其中的所有内容（见上文）。

于 2012-05-11T01:00:28.633 回答
0

我不知道问题出在哪里，但您可以尝试使用filter()而不是:contains选择器。filter()您可以创建自己的自定义过滤规则，因为它需要一个函数作为参数。

var myProducts = function (brand, team) {

    brand = brand || '';
    team = team || '';

    return $('.product').filter(function () {
        var re = new RegExp(brand + '.+' + team, 'i');
        return re.test($(this).text());
    });

};

myProducts('Brand1', 'TeamA').hide();
myProducts('Brand2').hide();

示例：http: //jsfiddle.net/elclanrs/hYZcW/

于 2012-05-11T00:31:08.763 回答
0

我想出了以下方法：

从选中所有复选框开始，因为您要显示所有产品。如果用户取消选中一个复选框，那么它应该隐藏与该品牌/团队匹配的产品。

这是我的代码：

var $filters = $("input:checkbox[name='brand'],input:checkbox[name=team]").prop('checked', true); // start all checked
var $categoryContent = $('#CategoryContent li'); // cache this selector
$filters.click(function() {
    // if any of the checkboxes for brand or team are checked, you want to show LIs containing their value, and you want to hide all the rest.
    $categoryContent.hide();
    $filters.filter(':checked').each(function(i, el) {
        $categoryContent.filter(':contains(' + el.value + ')').show();
    });
});​

jsFiddle 链接。

于 2012-05-11T00:53:44.557 回答
0

本周我在多项选择中遇到了同样的问题。选择器工作正常，但隐藏不起作用。我能够使用

.css('visibility', 'hidden'); // instead of .hide() and 
.css('visibility', ''); // instead of .show()

我不明白，但它奏效了。

于 2012-05-11T01:06:22.367 回答