2

乍一看，我被困在一个简单的问题上。

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

问题：

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

例子

类别是：

  1. 用 [red,blue]着色
  2. 形状与 [圆形，方形，自由]
  3. 带有 [lbl1,lbl2,lbl3] 的标签

这些项目是：

  1. item1与 [red,circle,lbl1]
  2. item2 [红色，圆圈，lbl3]

输入/选择：

  1. [红色]和[圆圈]
  2. [红色]和[圆圈]和[lbl1]
  3. [red,blue]和[circle]和[lbl1]

预期成绩：

  1. [item1]和[item2]应该显示
  2. [item1]应该只显示
  3. [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();
4

0 回答 0