Question

我有几个复选框，其值类似于tag-11，tag-12，tag-13等。列内部是列表项，其中包含类似tag-11，tag-12，tag-13等的类。所以我想要做的是检查一些复选框，然后在列表类上过滤col-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

每当更改时，可以生成所有已检查复选框值的数组。然后隐藏所有内容并使用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而不是hide / show change to：

$('.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]();
});

按其子类＆＃39;过滤div。值

1 个答案: