Question

乍一看，我似乎只是看似简单的问题。

出于示范目的，我创建了一个jsfiddle。

问题：

我有很多类别（表示为带有复选框的字段集，在生产中大约有20个）和项目列表。我需要根据用户选择的方式过滤项目，相互之间的类别关系是 AND 运算符。

示例

类别是：

颜色
形状，[circle，square，free]
标签与[lbl1，lbl2，lbl3]

项目是：

item1
item2 [red，circle，lbl3]

输入/选择：

[red] 和 [circle]
[red] 和 [circle] 和 [lbl1]
[红色，蓝色] 和 [circle] 和 [lbl1]

预期结果：

[item1] 和 [item2] 应该显示
[item1] 应仅显示
[item1] 应仅显示

算法：

此时我正在努力：/

（如果该项具有属性，在第一类中选择）AND（如果该项具有属性，则在第二类中选择）AND（...）

最后一个问题

javascript / jquery中的这种算法看起来是什么样的，它以动态的方式工作。我不想为AND关系写出数百个if-then-else语句。

代码

复选框

<div class="block" id="selectionGuide" data-guide="products">    
<fieldset id="color" class="checkbox_container">
    <legend>Color</legend>
    <ul class="checkbox_list">
      <li><input type="checkbox" id="color1" value="red"><label for="color1">Red</label></li>
      <li><input type="checkbox" id="color2" value="blue"><label for="color2">Blue</label></li>
    </ul>
</fieldset>
<!-- some more fieldsets with checkboxes -->
</div>

产品

<div class="items">
    <div class="productItem" data-properties="red circle lbl1">
        <p>Item 1</p>
            <div class="productItemDetails">
                <ul>
                    <li>red</li>
                    <li>circle</li>
                    <li>label 1</li>
                </ul>
            </div>
    </div>
    <!-- a lot more items -->
</div>

数据组属性

这应该有助于区分没有选中复选框的类别。应该为查找节省一些时间。

$('[data-properties~=' + $(this).val() + ']').each(function() {                
        if ($(this).attr('data-group') === undefined) {
            $(this).attr('data-group', group);
        } else if ($(this).attr('data-group').indexOf(group) >= 0) {
            if ($('#' + group).find('input[type="checkbox"]:checked').length <= 0) {
                bla = $(this).attr('data-group').replace(' ' + group, '');
                $(this).attr('data-group', bla);
            }
        } else {
            $(this).attr('data-group', $(this).attr('data-group') + ' ' + group);
        }
    });

第一种基于jquery选择器过滤项目的方法，但不知道如何动态创建这些选择器

// example selector for Item 1 with properties [red,circle,lbl1]
$('[data-properties~=red][data-properties~=circle][data-properties~=lbl1]').show();
// example selector for Item 5 with properties [red,circle,lbl3]
$('[data-properties~=red][data-properties~=circle][data-properties~=lbl3]').show();

筛选每个项目的第二种可能方式......也不知道如何编写逻辑：/

products.filter(function() {
        /** 
         * for each product:
         * - take each data-group and lookup for checked boxes
         * - if for a data-group at least ONE data-property of the checked boxes match AND at least the properties match in all the other data-groups, too
         */

        // good logic/algorithm is needed :/
        if ($(this).is('[data-group]')) {
            // split the data-groups into separated strings
            groups = $(this).attr('data-group').split(' ');

            // a way to look for the checked boxes, but dont know what i should to here :/
            for (i=0; i<groups.length; i++) {
                $('#' + groups[i] + ' input[type="checkbox"]:checked');
            }
        }

        // example for most simple evaluation... attention with the "search" string. should be splitted up, to be not restricted to the word order
        if ($(this).attr('data-properties').search('red circle lb1') >= 0) { return true; }

    }).show();

使用基于类别的jquery过滤项目（AND关系）

0 个答案: