PHP - 使用数据标签属性的 AJAX 复选框过滤器

Question

我有data-tag="Novel"。当我勾选“小说”复选框时，它将显示data-tag 属性中包含“小说”的书籍。目前，javascript/Jquery 部分适用于包含单个值但不包含多个值的 data-tag。我怎样才能做到这一点，例如有两本书的data-tags分别是data-tag="Fiction,Novel"和data-tag="Non-Fiction,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>