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

jQuery项目过滤宽度多个类

1 个答案: