I have data-tag="Novel"
. When I tick the 'Novel' checkbox it will show the books that contain 'Novel' in the data-tag
attribute. Currently the javascript/Jquery part works for data-tag
that contains a single value but not multiple values. How can I make it such that for example there are two books of which their data-tags
are data-tag="Fiction,Novel"
and data-tag="Non-Fiction,Novel"
respectively and when i tick the 'Novel' checkbox it will show both books or when I tick the 'Fiction' checkbox it will only show the books that contains 'Fiction' in the data-tag
attribute.
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>
Aucun commentaire:
Enregistrer un commentaire