divをその子クラスの値でフィルタリングする

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

一つが変化するたびに、すべてのチェックをcheckboxe値の配列を作ることができます。そして、すべてのものを隠し、あなたの代わりに表示/非表示の変更のフェードイン/フェードアウトをしたい場合は

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>

を表示するものをフィルタリングするhas()を使用するには：

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