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

【问题标题】：Creating a list of items with different tags + filter创建具有不同标签+过滤器的项目列表
【发布时间】：2015-09-01 02:54:16
【问题描述】：

我准备了一个我想要生成的示例：link。我已经寻找了一些东西，并且我找到了创建过滤器的方法，但只是为了一个值......在我的情况下，我需要更多的值组合在一起。因此，如果我想在布拉格 1 号以低于 6 000 000 的价格购买一套公寓，它会为我筛选。

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

【问题讨论】：

请提供您正在处理的代码。
根据你的链接，使用javascript有什么限制吗？或者您只想使用 CSS 来实现它？
Pratik - 完全没有限制！我使用 JS 没问题，但不幸的是我不知道如何使用它... kevin - 链接在文本中。

标签： javascript html list filter

【解决方案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 过滤它们。

【讨论】：

我为项目创建了选择器，但按钮 CLEAR 无法正常工作。
link 在这里。我需要的第二件事是，在选项中我希望拥有例如 3 个价格，但项目的价格与选项中的价格不同，但价格更低（例如，29 000 的属性会对过滤器做出反应 - 小于 30 000 等等）
那么在这种情况下，您可以使用 .filter(function() { return $(this).attr("Price") 进行过滤
太棒了！ :) 但是#clear 在网站上不起作用我不知道为什么...我们可以创建另一个按钮来订购过滤物品以提高价格吗？就像最低的价格会在顶部（反之亦然）
你能自己看网页吗？ link 为什么按钮不起作用.. 您能否添加用于过滤内容的下拉列表（从最便宜到最广泛）。如果您能帮帮我，我很乐意邀请您喝杯咖啡（通过贝宝）。