jquery Item过滤宽度多类

Question

你能帮帮我吗？我开始使用过滤器宽度多个值来对项目进行排序。我已经选择了过滤器项并将它们的值作为类名传递给容器。但是我如何才能正确查看容器类和项目类匹配的那些项目？

这是我的代码，可以清楚地看到它：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
if ($('.filter').length > 0) {
console.log('van');
  //This makes data-filter to class
  $('.active').each(function() {
    var featureClassName = $(this).attr('data-filter');

    $('#container').addClass(featureClassName);
  });

  //On click remove classes and collect classes from active filters
  $('.type > .filter').on('click', function() {
console.log('click');
    $(this).siblings().removeClass('active');

    $(this).addClass('active');

    $('#container').removeClass();

    if ($('.type > .filter').hasClass('active')) {
      $('.active').each(function() {
        var filterClasses = $(this).attr('data-filter');

        $('#container').addClass(filterClasses);
      });
    }
    // Hide item if not match, visible if match

  });
}
</script>
<style>
.active {color:red;}

</style>

<div id="filters">
  <ul class="type">
    <li class="filter" data-filter="value1" class="active">value1</li>
    <li class="filter" data-filter="value2">value2</li>
  </ul>
  <ul class="type">
    <li class="filter" data-filter="value3 active">value3</li>
    <li class="filter" data-filter="value4">value4</li>
  </ul>
  <ul class="type">
    <li class="filter" data-filter="value5">value5</li>
    <li class="filter" data-filter="value6 active">value6</li>
    <li class="filter" data-filter="value7">value7</li>
  </ul>
</div>

<div id="container" class="value1 value3 value6">
  <div class="item otherclassname value3 value6">item1</div>
  <div class="item value4 value7 otherclassname">item2</div>
  <div class="item otherclassname value4 value7">item3</div>
  <div class="item value3 value5 otherclassname">item3.1</div>
  <div class="item otherclassname value4 value5">item4</div>
  <div class="item otherclassname value4 value6">item5</div>
  <div class="item otherclassname value3 value5">item6</div>
  <div class="item otherclassname value3 value6">item7</div>
  <div class="item value4 otherclassname value6">item8</div>
  <div class="item otherclassname value3 value7">item9</div>
  <div class="item value3 value6 otherclassname">item10</div>
  <div class="item value4 otherclassname value7">item11</div>
</div>

此时我有活动过滤器，它们的数据进入类。现在我不知道如何使匹配的类显示和隐藏没有与容器类匹配的类的项目。

您能帮我一些帮助吗？

Answer 1

试试这个

function HideNoMatch() {
    var classes = $('#container')[0].className.split(' ');
    var childArr = $('#container').children();
    for (var item of childArr) {
        var flag = false;
        classes.map(function(e) {
            if (flag) {
                return false;
            }
            flag = item.className.indexOf(e) > -1 ? true : false;
        });
        flag ? null : $(item).hide();
    }
}