Question

我准备了一个我想要制作的例子：link。我已经找到了一些东西，我已经找到了创建过滤器的方法，但只是为了一个值...在我的情况下，我需要更多的值一起组合。因此，如果我想在布拉格1号以及价格低于6 000 000的单位，它会为我过滤它。

我怎么能实现它？非常感谢您的回复。

Answer 1

以下是我为您创建的codePen示例：

$('#filter').click(function() {
  var _typeFilter = $('input[name=type]:checked').val();
  var _locationFilter = $('input[name=location]:checked').val();

  $('ul li').each(function() {
    if ($(this).filter('[type=' + _typeFilter + ']').filter('[location=' + _locationFilter + ']').length > 0)
      $(this).show();
    else
      $(this).hide();
  });
});

$('#clear').click(function() {
  $('ul li').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <input type="radio" name="type" value="flat" />Flat
  <input type="radio" name="type" value="house" />House
</div>
<div>
  <input type="radio" name="location" value="city1" />City1
  <input type="radio" name="location" value="city2" />City2
  <input type="radio" name="location" value="city3" />City3
</div>
<a href="#" id="filter">Filter</a>
<a href="#" id="clear">Clear</a>

<ul>
  <li location='city1' type='flat' price='500000'>Item1</li>
  <li location='city1' type='house' price='300000'>Item2</li>
  <li location='city2' type='flat' price='400000'>Item3</li>
</ul>

CodePen link

您应该使用Jquery来实现这一目标。使用您的属性绑定参数 'li'标记并使用Jquery过滤它们。

创建具有不同标签+过滤器的项目列表

1 个答案: