PHP - AJAX Checkbox-Filter mit Daten-Tag-Attribut

Question

Ich habe data-tag="Novel". Wenn ich das Kontrollkästchen 'Neu' ankreuze, werden die Bücher angezeigt, die 'Neu' im Attribut data-tag enthalten. Derzeit funktioniert der JavaScript/Jquery-Teil für data-tag, die einen einzelnen Wert aber nicht mehrere Werte enthält. Wie kann ich es so machen, dass zum Beispiel gibt es zwei Bücher, deren data-tags sind data-tag="Fiction,Novel" bzw. data-tag="Non-Fiction,Novel" und wenn ich das Kontrollkästchen "Roman" ankreuzen wird es beide Bücher zeigen, oder wenn ich das Kontrollkästchen "Fiktion" ankreuzen wird es nur zeigen Bücher, die 'Fiction' im data-tag Attribut enthalten.

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

Sie sind nicht weit von der Lösung. Sie müssen nur Ihre items Schleife durchlaufen. Verstecken Sie zuerst das Element und dann, wenn mindestens eines der Tags übereinstimmt, zeigen Sie es an.

$(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

Das Problem ist, dass Sie auf einem anderen Array für ein Array zu suchen versuchen.

Verwenden Sie eine Schleife.

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