根据其子类的值过滤div

Question

我有几个复选框，它们的值是tag-11，tag-12，tag-13等。列里面是列表项，它们有像tag-11，tag-12，tag-13等类。所以我想做的是，当一些复选框被选中时，过滤它的列表类上的columns md-4。此外，还必须能够选中和过滤多个复选框。你们能帮我正确完成代码吗？所有列都必须在页面加载时可见。

列：

<div class="col-md-4">
  <div class="col-inner item-home">
    <div class="page-header">
      <h2>
                <a href="#" itemprop="url">Lorem ipsum</a>
            </h2>
    </div>
    <ul class="tags inline">
      <li class="tag-11" itemprop="keywords">
        <a href="#" class="label label-info">Cool</a>
      </li>
      <li class="tag-12" itemprop="keywords">
        <a href="#" class="label label-info">Nice</a>
      </li>
      <li class="tag-13" itemprop="keywords">
        <a href="#" class="label label-info">Check</a>
      </li>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </ul>
  </div>
</div>

jQuery：

jQuery(document).ready(function($) {

  var tagClassArr = [];
  $('.col-md-4 ul li').each(function() {
      var tags = $(this).attr('class');
      tagClassArr.push(tags);
      return false; // break each loop
  });

    if($('.tag-filters :checkbox').prop('checked', false)) {
             $('.col-md-4').show();
            }

  $('.tag-filters :input:checked').each(function() {
    var val = $(this).val();
    if ($.inArray(val, tagClassArr)) {
            $('.col-md-4').each(function() {
             $(this).filter(this).fadeIn(100);
          });
    }
  });

  // reset checkboxes
  $('.reset').on('click', function() {
      $('.tag-filters :checkbox').prop('checked', false);
      $('col-md-4').fadeIn();
    });

}); // end jQuery

复选框：

<form class="form-inline">
    <div class="form-group tag-filters">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="tag-11"/>Hey
            </label>
      <label>
                <input type="checkbox" value="tag-12"/>Okay
            </label>
      <label>
                <input type="checkbox" value="tag-13"/>Wow
            </label>
        </div>
    </div>
    <button class="reset btn btn-secondary" type="btn" name="button">Reset</button>
</form>

Answer 1

无论何时改变，都可以将所有选中的Checkboxe值组成一个数组。然后隐藏所有内容，并使用has()过滤要显示的内容

​

var $filterChecks =$('.tag-filters :checkbox');

$filterChecks.change(function(){
  var classSelectors = $filterChecks.filter(':checked').map(function(){
     return '.' + this.value;
  }).get().join();
 
  // hide all, then show the ones that have any of the above classes
  $('.col-md-4').hide().has(classSelectors).show()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline">
    <div class="form-group tag-filters">
        <div class="checkbox">
            <label>
                <input type="checkbox" value="tag-11"/>Hey
            </label>
      <label>
                <input type="checkbox" value="tag-12"/>Okay
            </label>
      <label>
                <input type="checkbox" value="tag-13"/>Wow
            </label>
        </div>
    </div>
    <button class="reset btn btn-secondary" type="btn" name="button">Reset</button>
</form>

<div class="col-md-4">
  <div class="col-inner item-home">
    <div class="page-header">
      <h2>
                <a href="#" itemprop="url">Lorem ipsum</a>
            </h2>
    </div>
    <ul class="tags inline">
      <li class="tag-11" itemprop="keywords">
        <a href="#" class="label label-info">Cool</a>
      </li>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </ul>
  </div>
</div>

<div class="col-md-4">
  <div class="col-inner item-home">
    <div class="page-header">
      <h2>
                <a href="#" itemprop="url">Lorem ipsum</a>
            </h2>
    </div>
    <ul class="tags inline">
     
      <li class="tag-12" itemprop="keywords">
        <a href="#" class="label label-info">Nice</a>
      </li>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </ul>
  </div>
</div>

<div class="col-md-4">
  <div class="col-inner item-home">
    <div class="page-header">
      <h2>
                <a href="#" itemprop="url">Lorem ipsum</a>
            </h2>
    </div>
    <ul class="tags inline">
      
      <li class="tag-13" itemprop="keywords">
        <a href="#" class="label label-info">Check</a>
      </li>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </ul>
  </div>
</div>

​

如果您想要fadein/fadeOut而不是隐藏/显示，请更改为：

$('.col-md-4').each(function(){
  var $cont = $(this).stop(true,true),// for fast changes cancel existing animation
      show = $cont.has(classSelectors).length,
      fade = show ? 'fadeIn': 'fadeOut';
     $cont[fade]();
});