Javascript 如何基于多个属性和多个属性值显示/隐藏元素？

我想基于属性过滤器查看/隐藏页面上的div。我已经创建了几个属性，它们可以有多个值。用户可以选择要显示的内容

我无法获得正确的算法（或者我不知道要使用哪个

Javascript/jQuery

函数）。下面的方法显然不起作用。我首先显示所有项目，然后循环过滤，隐藏与属性不匹配的项目（读取：循环中的当前属性）。这意味着即使项目稍后可能与某个属性匹配，也会被隐藏

如何使此过滤器机制正常工作，并且不排除/隐藏循环中稍后基于选定属性不需要隐藏的项目？可能有一些OR运算符可用于属性选择

（'div[group=firstgroup | thirdgroup]'）

Javascript:

    $(document).ready(function() {
        var items = $('#items').find('div');
        $(items).show();

        var groupsToShow = Array('firstgroup','thirdgroup');
        var namesToShow = Array('Fred','Pete');
        var applicationsToShow = Array('light');

        for(var i=0;i<groupsToShow;i++) {
            $(items).find('div[group!='+groupsToShow[i]+']').hide();    
        }

        for(var i=0;i<namesToShow;i++) {
            $(items).find('div[name!='+namesToShow[i]+']').hide();    
        }

        for(var i=0;i<applicationsToShow;i++) {
            $(items).find('div[application!='+applicationsToShow[i]+']').hide();    
        }
    });

<div id="items">
    <div group="firstgroup" name="Rob" application="special"></div>
    <div group="firstgroup" name="Fred" application="light"></div>
    <div group="secondgroup" name="Pete" application="special"></div>
    <div group="thirdgroup" name="Pete" application="special"></div>
    <div group="thirdgroup" name="Pete" application="light"></div>
    <div group="secondgroup" name="Pete" application="normal"></div>
    <div group="thirdgroup" name="Pete" application="special"></div>
</div>

$（文档）.ready（函数（）{
var items=$（'#items'）。查找（'div'）；
$（items.show（）；
var groupsToShow=Array（'firstgroup'，'thirdgroup'）；
var namesthow=Array（'Fred'，'Pete'）；
var applicationsToShow=数组（'light'）；
对于（var i=0；i，您可以使用add（）构建要显示的项目列表：

$（文档）.ready（函数（）{
var items=$（'#items'）。查找（'div'）；
$（items.hide（）；
var groupsToShow=['firstgroup'，'thirdgroup']；
var namesthow=['Fred'，'Pete']；
var applicationsToShow=['light']；
var$itemsToShow=$（）；
对于（var i=0；i，您可以使用add（）构建要显示的项目列表：

$（文档）.ready（函数（）{
var items=$（'#items'）。查找（'div'）；
$（items.hide（）；
var groupsToShow=['firstgroup'，'thirdgroup']；
var namesthow=['Fred'，'Pete']；
var applicationsToShow=['light']；
var$itemsToShow=$（）；
对于（var i=0；i，据我所知，只有当元素满足所有三个数组中包含的内容时，才需要显示它们。因此，在上述情况下，第二个和第五个div将是唯一显示的……对吗

如果我的假设是正确的，那么这应该是可行的：

var show = {
    'group': ['firstgroup','thirdgroup'],
    'name': ['Fred','Pete'],
    'application': ['light']
};

$('#items div')
    .hide()
    .filter(function(){
        // Only returns true for elements
        // that satisfy all three arrays
        for (var i in show) {
            var attr = $(this).attr(i),
                match = ('|' + show[i].join('|') + '|').indexOf(attr) > -1;
            if (!match) {
                return false;
            }
        }
        // If we reach this point then we can assert
        // that the element contains all required attributes
        return true;
    })
    .show();

据我所知，如果元素满足所有三个数组中所包含的内容，您只希望显示元素。因此在上述情况下，第二个和第五个div将是唯一显示的元素…对吗

如果我的假设是正确的，那么这应该是可行的：

var show = {
    'group': ['firstgroup','thirdgroup'],
    'name': ['Fred','Pete'],
    'application': ['light']
};

$('#items div')
    .hide()
    .filter(function(){
        // Only returns true for elements
        // that satisfy all three arrays
        for (var i in show) {
            var attr = $(this).attr(i),
                match = ('|' + show[i].join('|') + '|').indexOf(attr) > -1;
            if (!match) {
                return false;
            }
        }
        // If we reach this point then we can assert
        // that the element contains all required attributes
        return true;
    })
    .show();

但这意味着第一个div（group=firstgroup name=rob application=special）将包含在$（itemsToShow）数组中（基于第一个groupsToShow数组），但它最终应该被隐藏，因为它不包含在namesToShow和applicationsToShow中…换句话说，过滤器不会相互影响。我的印象是您想要或它们。没错，这是因为值，而不是属性…感谢您的努力，但这意味着（使用group=firstgroup name=rob application=special）将包含在$（itemsToShow）数组中（基于第一个groupsToShow数组），但它最终应该被隐藏，因为它不包含在namesToShow和applicationsToShow中…换句话说，过滤器不会相互影响。我觉得你想要或它们。没错，但这是因为值，而不是属性…谢谢你的努力，虽然我认为你有我的需要。我会尝试，让你试试我想你有我的需要。我会试试，让你知道一点。