Question

我正在尝试使用jQuery过滤一些产品搜索结果。可以使用各种类型的过滤器来挖掘结果（颜色，类型，大小等），我想通过隐藏那些没有过滤器的过滤器，无法通过过滤器得到“无结果”任何内容都是过滤器。

我想另一种表达我的问题的方法是，在允许用户激活它们之前，我试图验证应该存在哪些过滤器。

例如，在示例代码中，如果选择了#brnd_B且没有包含.prdbx.brnd_B.ptype_C的产品，则应禁用#ptype_C，以便用户无法选择它。

在使用任何过滤器后，应禁用#col_Red选项，因为它在产品列表中不存在。出于同样的原因，可以禁用#cat_C。

然后，显然在过滤后应显示相应的.prdbx框。

Sample Code:

<h1>Brands</h1>
<input type="radio" class="bFilter filterSwitch" name="bFilter" id="brnd_A">
<input type="radio" class="bFilter filterSwitch" name="bFilter" id="brnd_B">
<input type="radio" class="bFilter filterSwitch" name="bFilter" id="brnd_C">

<h1>Types</h1>
<input type="radio" class="pTypeFilter filterSwitch" name="pTypeFilter" id="ptype_A">
<input type="radio" class="pTypeFilter filterSwitch" name="pTypeFilter" id="ptype_B">
<input type="radio" class="pTypeFilter filterSwitch" name="pTypeFilter" id="ptype_C">

<h1>Options</h1>
<input type="radio" class="bTypeFilter filterSwitch" name="bTypeFilter" id="cat_A">
<input type="radio" class="bTypeFilter filterSwitch" name="bTypeFilter" id="cat_B">
<input type="radio" class="bTypeFilter filterSwitch" name="bTypeFilter" id="cat_C">

<h1>Colors</h1>
<input type="radio" class="cTypeFilter filterSwitch" name="cTypeFilter" id="col_Black">
<input type="radio" class="cTypeFilter filterSwitch" name="cTypeFilter" id="col_Blue">
<input type="radio" class="cTypeFilter filterSwitch" name="cTypeFilter" id="col_Red">

<h1>Products</h1>
<div class="prdbx show brnd_A cat_B ptype_C col_Black yld_Standard mod_PIXMAiP4820  mod_PIXMAiX6520  mod_PIXMAiX6550">Data 1</div>
<div class="prdbx show brnd_B cat_A ptype_A col_Blue yld_Standard mod_PIXMAiX6520">Data 2</div>
<div class="prdbx show brnd_A cat_A ptype_B col_Black yld_Standard mod_PIXMAiP4820">Data 3</div>

这是我到目前为止的jQuery;它在大多数情况下都显示了相应的.prdbx，但在显示之前它永远不会“验证单选按钮是否应该被允许”，这正是我所挣扎的。

如果我将sep变量设为逗号，我也会得到混合结果。

非常感谢任何帮助。

    $('.filterSwitch').click(function(e) {
        $('.brandbx').hide();
        $('.prdbx').hide(); // hide all products
        // set up variables
        thisFilter1 = "";
        var sep = ""
        // hide inapplicable filters

        // figure out what we're displaying
        $('input[name=bFilter]:checked').each(function(e) {
            thisFilter1 = thisFilter1 + sep + '.'+this.id;
        });
        $('input[name=bTypeFilter]:checked').each(function(e) {
            thisFilter1 = thisFilter1 + sep + '.'+this.id;
        });
        $('input[name=pTypeFilter]:checked').each(function(e) {
            thisFilter1 = thisFilter1 + sep + '.'+this.id;
        });
        $('.cTypeFilter').each(function(e) {
            thisFilter1 = thisFilter1 + sep + '.'+this.id;
        });

        $(thisFilter1).show();
        verifyEmpty();
    });

    function verifyEmpty(){
        var totalFilter = 0;
        $('input[name=bFilter]:checked').each(function(e) {
            totalFilter++;
        });
        $('.cTypeFilter:checked').each(function(e) {
            totalFilter++;
        });
        $('.pTypeFilter:checked').each(function(e) {
            totalFilter++;
        });
        $('.bTypeFilter:checked').each(function(e) {
            totalFilter++;
        });
        if(totalFilter == 0){
            $('.prdbx').show(); // show all products    
            $('.brandbx').show(); // show models
        }
    }

Answer 1

您可以尝试以下代码

$('.filterSwitch').each(function(){
if($("."+this.id).length<=0)
    this.disabled=true;
});

考虑到即使选择了一个单选按钮而其他单选按钮为空白，也应该过滤这些值（因为您的代码现在正常工作）。如果不是这样的话＆amp;你希望在过滤之前选择所有的单选按钮，然后代码会有所不同。

jQuery隐藏与所选类不匹配的div

1 个答案: