时间戳

首页 > 解决方案 > List.js - 按超过 1 个键/值/答案的属性过滤

javascript - List.js - 按超过 1 个键/值/答案的属性过滤

问题描述

我正在尝试通过数据属性过滤 List.js 列表，其中结果有多个答案：

 <div data-colors="red, blue, green">Item Name</div>

当我尝试以下操作时，它不会搜索每个项目：

 $('.filter').on('click',function(){
   var $q = $(this).attr('data-colors');

   if($(this).hasClass('active')){
      myList.filter();
      $('.filter').removeClass('active');
   } else {
     myList.filter(function(item) {
        if (item.values().colors == $q) {
           return true;
        } else {
           return false;
        }
      });
      $('.filter').removeClass('active');
      $(this).addClass('active');
   }
});

如果我在只有一个结果时尝试它，那么它可以正常工作：

 <div data-colors="red">Item Name</div>

我尝试了各种选项来过滤每个项目，但似乎没有任何效果。

有任何想法吗？

标签： javascriptfilterlistjslist.js

解决方案

我刚刚为一个客户的项目做了这个分析。我们想要一个简单的复选框输入系统。困境是无序列表中的单个元素可能具有多个角色（数据颜色）。我选择了一个二进制值来表示这一点。过滤器使用了一个简单的按位与函数。这运作良好。

完整代码在这里。

演示，通过 CodeSandBox 在这里。 请务必查看控制台日志以了解过滤事务。

关键功能在这里：

        var teamKey = 16 + 8 + 4 + 2 + 1;

        function OnChangeCheckbox(checkbox, listObj) {
            if (checkbox.checked) {
                console.log("The check box is checked. " + checkbox.value);
                teamKey += parseInt(checkbox.value, 10);
            } else {
                console.log("The check box is not checked.");
                // remove value from teamArray
                teamKey -= parseInt(checkbox.value, 10);
            }
            console.log("teamKey: " + dec2bin(teamKey));
            listObj.filter(filterList);
        }

        function filterList(item) {
            console.log("indiv value: ", dec2bin(item.values().teams), " teamKey: ", dec2bin(teamKey) )
            console.log( "     Bitwise And: ", dec2bin(item.values().teams & teamKey));

            if (item.values().teams & teamKey) {  // the magic is here
                console.log("    pass: ", item.values().teams & teamKey);
                return true;
            } else {
                console.log("    fail: ", item.values().teams & teamKey);
                return false;
            }
        }

列表元素<div class="teams">XX</div>将通过display: none;使用中的 CSS 隐藏。

推荐阅读