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

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 来实现此目的。将参数与您的属性绑定(bind)'li' 标签并使用 Jquery 过滤它们。