vendredi 25 mars 2016

PHP - AJAX checkbox filter using data-tag attribute

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