javascript - 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();
    }
}