Question

出于某种原因，具有数据ID＆＃39; property-company＆＃39;的最后一项将在检查其所有值时显示，即电子邮件，品牌和财产。我注意到，当数据类别标记内的值与它所使用的复选框值的顺序相同时，这些值将被动态添加，因此无法控制顺序。

这是小提琴......

http://jsfiddle.net/amesy/kwqpf5fv/1/

这是jQuery ......

$(function() {

var $checkboxes = $("input[id^='type-']");
$('input[type=checkbox]:checked').attr('checked', false);

$checkboxes.change(function() {
    console.log($('input[type=checkbox]:checked').length);
    if( $('input[type=checkbox]:checked'
         ).length>0)
{
    var selector1 = '';
    var selector2 = '';
    $checkboxes.filter(':checked').each(function() { // checked 
        selector1 += $(this).attr('rel') + ' ';
        selector2 = $(this).attr('rel') + ' ' + selector2;
        // builds a selector like '.A, .B, .C, ' 
    });
    selector1= selector1.substring(0, selector1.length - 2); // remove trailing ', '
    selector2= selector2.substring(0, selector2.length - 2); // remove trailing ', '
    $('[data-category]').hide() // hide all rows
     .filter(function() {
         if ($(this).data('category').indexOf(selector1) != -1 ||     $(this).data('category').indexOf(selector2) != -1) { return true; } else { return false; }; 
    }).show(); // reduce set to matched and show

}else

{
 $('[data-category]').show()    
}
});

});

这是html ...

<div class="tags">
        <label><input type="checkbox" id="type-Website" rel="Website">Website</label>
        <label><input type="checkbox" id="type-Email" rel="Email">Email</label>
        <label><input type="checkbox" id="type-Branding" rel="Branding">Branding</label>
        <label><input type="checkbox" id="type-Automotive" rel="Automotive">Automotive</label>
        <label><input type="checkbox" id="type-Property" rel="Property">Property</label>
    </div>

<div class="portfolio-item" data-id="one-page-website" data-category="Automotive Email Website" style="display: block;">

            <h1 class="entry-title">One Page Website</h1>

        </div>

<div class="portfolio-item" data-id="some-logo" data-category="Branding Property" style="display: block;">

            <h1 class="entry-title">some Logo</h1>

        </div>

<div class="portfolio-item" data-id="some-email-campaign" data-category="Automotive Email" style="display: block;">

            <h1 class="entry-title">Some Email Campaign</h1>

        </div>

<div class="portfolio-item" data-id="some-brand" data-category="Automotive Branding Email" style="display: block;">

            <h1 class="entry-title">some brand</h1>

        </div>

<div class="portfolio-item" data-id="property-company" data-category="Branding Email Property" style="display: block;">

            <h1 class="entry-title">Stationery</h1>

        </div>

Answer 1

您正在使用两个具有相反类别序列的选择器。

这仅适用于组合仅为2的两个选定类别。

对于3个选定的类别，您将获得6种组合，对于4种选择，您将获得24种组合等。

您需要将类别拆分为数组并检查每个元素是否与所有选定的类别匹配（一次检查一个）或使用允许本机选择器的类。

以下是使用类的解决方案（您需要将类别移动到类属性）
（我还将复选框上的rel属性更改为value属性，因为它更容易，更有意义）

$(function () {

    var $checkboxes = $("input[id^='type-']");
    $('input[type=checkbox]:checked').attr('checked', false);

    $checkboxes.change(function () {
        var selector = '',
            count = $('input[type=checkbox]:checked').each(function () {
            selector += '.' + this.value; // create `.a.b.c` selector
        }).length,
            items = $('.portfolio-item');

        if (count>0) {
            items.hide().filter(selector).show();
        } else {
            items.show();
        }
    });

});

http://jsfiddle.net/kwqpf5fv/4/

Answer 2

我改变了数据类别的顺序，但它确实有效。

        <div class="portfolio-item" data-id="property-company" data-category="Property Branding Email" style="display: block;">
        <h1 class="entry-title">Stationery</h1>
    </div>

我建议使用类。

Answer 3

我修复了您的完整代码。 javascript已更新：

function StringContainsAllItems(stringVal, items){
   if(items.length == 0 || items.length == null){
    return false;   
}

for(var i = 0; i < items.length; i++){
    console.log("Item: " + items[i]);
    if(stringVal.indexOf(items[i]) == -1)
    {
         return false;   
    }
}

return true;
}


$(function() { 
    var $checkboxes = $("input[id^='type-']");
    $('input[type=checkbox]:checked').attr('checked', false);

    $checkboxes.change(function() {
        if( $('input[type=checkbox]:checked').length > 0){

        var selectorArray = [];

        $checkboxes.filter(':checked').each(function() {
            selectorArray.push($(this).attr('rel'));
            console.log($(this).attr('rel'));             
        });

        $('[data-category]').hide() // hide all rows
         .filter(function() {
             return StringContainsAllItems($(this).data('category'), selectorArray);             
        }).show(); // reduce set to matched and show

    }else
        {
         $('[data-category]').show();   
        }
   });    
});

这里是jsfiddle：

http://jsfiddle.net/kwqpf5fv/5/

享受。

jQuery客户端侧过滤系统

3 个答案: