PHP-使用data-tag属性的AJAX复选框过滤器

Question

我有data-tag="Novel" 。 当我勾选“小说”复选框时，它将在data-tag属性中显示包含“小说”的书籍。 当前，javascript / Jquery部分适用于包含单个值但不包含多个值的data-tag 。 我如何做到这样，例如有两本书的data-tags分别是data-tag="Fiction,Novel"和data-tag="Non-Fiction,Novel" ，当我勾选“ Novel”时复选框将同时显示两本图书，或者当我勾选“小说”复选框时，它将仅显示在data-tag属性中包含“小说”的图书。

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

问题是您正在尝试在另一个阵列上搜索一个阵列。

使用循环。

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

Answer 2

您距离解决方案不远。 您只需要遍历您的items 。 首先隐藏元素，然后如果至少一个标签匹配，则显示它。

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