时间戳

首页 > 解决方案 > 全选时如何使用过滤器

jquery - 全选时如何使用过滤器

问题描述

我正在尝试.filter在 jQuery 中使用。使用此功能，我能够显示特定数据。但是我的问题是当我单击all它时，它会隐藏所有内容。

$.ajax({
  url: '/api/Item',
  type: 'GET',
  dataType: 'JSOn',
  async: false,
  success: function(res) {
    for (var i = 0; i < res.length; i++) {
      $('#Container').append('' +
        '<div class="col-md-3 col-sm-6 col-xs-12 portfolio-item" data-brand="' + res[i].productBrand + '">' +
        '<div class="portfolio-wrapper">' +
        '<div class="portfolio-thumb">' +
        '<img src="' + res[i].imageIcon + '" alt="" />' +
        '</div>' +
        '<div class="label-text">' +
        '<h3 style="color: #04a185; font-family: VAG Rounded";>' + res[i].productName + '</h3>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '')
    }
  }
})

posts = $('.portfolio-item')
$("#filters li span").click(function() {
  var customType = $(this).attr('data-filter') // category
  posts.hide().filter(function() {
    return $(this).data('brand') === customType;
  }).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="filters" class="clearfix">
  <li><span class="filter" data-filter="all"><h1>All</h1></span></li>
  <li><span class="filter" data-filter="Blooming"><h1>Blooming </h1></span></li>
  <li><span class="filter" data-filter="Sparkling"><h1>Sparkling </h1></span></li>
  <li><span class="filter" data-filter="Sets"><h1>Sets</h1></span></li>
</ul>

标签： jqueryfilter

解决方案

要完成这项工作，您可以检查是否customType是或者all 单击的值。尝试这个：

var $posts = $('.portfolio-item')

$("#filters li span").click(function() {
  var customType = $(this).data('filter');
  $posts.hide().filter(function() {
    return customType === 'all' || $(this).data('brand') === customType;
  }).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="filters" class="clearfix">
  <li><span class="filter" data-filter="all"><h1>All</h1></span></li>
  <li><span class="filter" data-filter="Blooming"><h1>Blooming </h1></span></li>
  <li><span class="filter" data-filter="Sparkling"><h1>Sparkling </h1></span></li>
  <li><span class="filter" data-filter="Sets"><h1>Sets</h1></span></li>
</ul>

<div class="portfolio-item" data-brand="Blooming">
   Blooming
</div>
<div class="portfolio-item" data-brand="Sparkling">
   Sparkling
</div>
<div class="portfolio-item" data-brand="Sets">
   Sets
</div>
<div class="portfolio-item" data-brand="Blooming">
   Blooming
</div>

推荐阅读