jquery - 带有 jQ​​uery 和 CSS 类的 HTML div 过滤器

Question

我有以下过滤器，它们在我的页面中过滤了一些 div 此时它正在工作，但我有很多产品类别需要过滤，我不想将它们全部写在 html 中。 请检查以下内容以更好地理解。

过滤 HTML

 <div id="stick-filter" class="filters panel-collapse collapse in">
    <div class="panel-content">
      <ul class="check-square filters-option">
        <li data-id="alfa 1,alfa 2,beta 1,beta 2" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
        <li data-id="alfa 1,alfa 2" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
        <li data-id="beta 1,beta 2" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>
      </ul>
    </div>
  </div>

过滤后的 div:

<div class="product-list">
<div id="product-list"  class="row image-box product listing-style1"> 
  <div data-stick="beta 1" class="col-sm-6 col-md-4"><p>Beta 1</p></div>
  <div data-stick="beta 2" class="col-sm-6 col-md-4"><p>Beta 2</p></div>
  <div data-stick="alfa 1" class="col-sm-6 col-md-4"><p>alfa 1</p></div>
  <div data-stick="alfa 2" class="col-sm-6 col-md-4"><p>alfa 2</p></div>
</div>

jQuery代码是

//filters
$(".filters li").on("click", function () {
    id = ($(this).data("id")+'').split(',');
    filter = $(this).data("filter");
    $("#product-list .col-sm-6").hide();
    id[0] == "all" && $("#product-list .col-sm-6").show() || id.forEach(function(v){
        $('#product-list .col-sm-6[data-'+filter+'="'+v.trim()+'"]').show();
    });
    return false;
});

有没有办法改变我的过滤器操作，以避免在 li data-id 字段中写入所有产品类别。

<li data-id="**to show all the products**" data-filter="stick"> <a href="#">All<small class="total"></small></a></li>
<li data-id="**where the word alfa is found**" data-filter="stick"> <a href="#">Alfa<small class="total-al"></small></a></li>
<li data-id="**where the word beta is found**" data-filter="stick"> <a href="#">Beta<small class="total-be"></small></a></li>

Answer 1

你需要使用 jQuery 的 .filter() 方法，像这样:

var id = 'example';

$('#product-list .col-sm-6')
    .filter(function () {
        return $(this).data('id').indexOf(id) >= 0;
    })
    .show();

在此示例中，将显示所有具有 data-id containing example 短语的列表元素。