PHP - AJAXのチェックボックスフィルタデータ・タグ属性

Question

を使用して私はdata-tag="Novel"を持っています。 「Novel」チェックボックスをチェックすると、data-tag属性に「Novel」を含む書籍が表示されます。現在のところ、javascript/Jqueryの一部はdata-tagで動作しますが、複数の値ではなく1つの値が含まれています。どのように私はそれが、例えばそのdata-tagsはそれぞれdata-tag="Fiction,Novel"とdata-tag="Non-Fiction,Novel"であり、i「は小説」のチェックボックスにチェックを入れたときに、それは本の両方が表示されますか、私は「フィクション」のチェックボックスにチェックを入れたときにのみ表示されますそのうち2冊があることを確認することができます書籍にはdata-tag属性の「Fiction」が含まれています。

Javascriptを/ jQueryの

$(document).ready(function(){  
    $('.genre').on('change', function(){ 
     var genreList = []; 

     $('#filterContainer :input:checked').each(function(){ 
      var genre = $(this).val(); 
      genreList.push(genre); 
     }); 

     if(genreList.length == 0) 
      $('.blItem').fadeIn(); 
     else { 
      $('.blItem').each(function(){ 
       var item = $(this).attr('data-tag'); 
       items = item.split(','); 

       if(jQuery.inArray(item,genreList) > -1) 
        $(this).fadeIn('slow'); 
       else 
        $(this).hide(); 
      }); 
     } 
    }); 
}); 

HTML

<div id="filterContainer"> 
      <div class="filter"> 
       <input id="check1" type="checkbox" name="check" value="Novel" class="genre"> 
       <label for="check1">Novel</label> 
      </div> 

      <div class="filter"> 
       <input id="check2" type="checkbox" name="check" value="Fiction" class="genre"> 
       <label for="check2">Fiction</label> 
      </div> 

      <div class="filter"> 
       <input id="check3" type="checkbox" name="check" value="Non-Fiction" class="genre"> 
       <label for="check3">Non-Fiction</label> 
      </div> 
     </div> 

<div class="booksList in fade"> 
      <?php 
      while($result = mysqli_fetch_array($query)) 
      { 
       $title = $result['title']; 
       $title = preg_replace('/[^A-Za-z0-9]/', "", $title); 

       $html = '<div class="blItem" data-tag="' . $result['genre'] . '"> 
          <a class="blMask jt" href="readBooks.php?title=' . $title . '&id=' . $result['id'] . '"> 
           <img data-original="' . $result['imageURL'] . '" 
           class="lazy thumb blThumb" 
           alt=""> 
          </a> 
         </div>'; 

       echo $html; 
      } 
      ?> 
     </div> 

Answer 1

あなたは遠くない溶液からです。 itemsをループするだけです。最初に要素を非表示にして、少なくとも1つのタグが一致する場合はそれを表示します。

$(document).ready(function(){  
 
    $('.genre').on('change', function(){ 
 
     var genreList = []; 
 

 
     $('#filterContainer :input:checked').each(function(){ 
 
      var genre = $(this).val(); 
 
      genreList.push(genre); 
 
     }); 
 

 
     if(genreList.length == 0) 
 
      $('.blItem').fadeIn(); 
 
     else { 
 
      $('.blItem').each(function(){ 
 
       var item = $(this).attr('data-tag'); 
 
       var items = item.split(','); 
 

 
       $(this).hide(); 
 
       for (var i=0;i<items.length;i++) { 
 
        if(jQuery.inArray(items[i],genreList) > -1) 
 
         $(this).fadeIn('slow'); 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
});

.blItem { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="filterContainer"> 
 
    <div class="filter"> 
 
    <input id="check1" type="checkbox" name="check" value="Novel" class="genre"> 
 
    <label for="check1">Novel</label> 
 
    </div> 
 

 
    <div class="filter"> 
 
    <input id="check2" type="checkbox" name="check" value="Fiction" class="genre"> 
 
    <label for="check2">Fiction</label> 
 
    </div> 
 

 
    <div class="filter"> 
 
    <input id="check3" type="checkbox" name="check" value="Non-Fiction" class="genre"> 
 
    <label for="check3">Non-Fiction</label> 
 
    </div> 
 
</div> 
 

 
<div class="booksList in fade"> 
 
    <div class="blItem" data-tag="X,Fiction">Item X and Fiction</div> 
 
    <div class="blItem" data-tag="Non-Fiction,Y">Item Y and Non-Fiction</div> 
 
    <div class="blItem" data-tag="Non-Fiction,Fiction">Item Fiction and Non-Fiction</div> 
 
</div>

Answer 2

問題はアレイの別の配列を検索しようとしているということです。

ループを使用します。

ele = this; 
cond = false; 
$.each(items, function(){ 
    cond = code || jQuery.inArray(this,genreList) != -1; 
    return !cond; 
}) 
if(cond) 
    $(ele).fadeIn('slow'); 
else 
    $(ele).hide();