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();

在此示例中，将显示包含<{1}} data-id词组的所有列表元素。

HTML div过滤器使用jQuery和CSS类

1 个答案: