Question

我希望能够同时应用并显示超过1个过滤器的结果，例如我可以选择“高”和“披萨”并显示这两个过滤器的结果，目前我只能得到它在过滤器之间切换并显示所选1的结果。

<div class="nav">
<a href="#" data-category-type="high">high</a>

<a href="#" data-category-type="low" data-category-name="air">low</a>

<a href="#" data-category-name="pizza">pizza</a>

</div>
<div id="Categories">
    <div class="hide" data-category-type="high" data-category-  name="pizza">high</div>
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div class="hide" data-category-type="high" data-category-name="pasta">high</div>
</div>

$('.nav a').on('click', function (e) {
e.preventDefault();
var cat = $(this).data('categoryType');
var nam = $(this).data('categoryName');
$('#Categories > div').hide();
$('#Categories > div[data-category-type="'+cat+'"]').show();
$('#Categories > div[data-category-name="'+nam+'"]').show();

});

Answer 1

你做错了。您不能使用$（this）来获取类别和名称。

使用click函数，$（this）将始终为您提供单击的元素。在您的情况下，相同的元素，不一定具有类别和名称的信息。

因此，您需要更新您的html，以便所有锚点都具有数据属性或需要更新您的函数，以便从有效源中选择类别和名称。

我将为您创建一个示例供您进一步解释。

这是一个带有html更新的版本，其中锚点具有数据属性

像

<a href="#" data-category-type="high"  data-category-name="pizza">High and pizza</a>

https://jsfiddle.net/f7srx0dd/4/

这是与javascript更新

https://jsfiddle.net/f7srx0dd/5/

希望您发现结果有用!!

Answer 2

为了处理多个过滤器，您可以在每次单击链接时切换类。（请注意，此功能更适合按钮，而非锚点。但我会使用锚点来匹配您的HTML。）

$('.nav a').on('click', function (e) {
  $(this).toggleClass('selected');
  $('#Categories > div').hide();

  $('.selected').each(function() {
    var cat= $(this).data('categoryType');
    var nam= $(this).data('categoryName');
    $('#Categories > div[data-category-type="'+cat+'"]').show();
    $('#Categories > div[data-category-name="'+nam+'"]').show();
  });
});

此代码切换一个名为selected的类，它会遍历所选项categoryType和categoryName中的每一个，以确定要在过滤器中包含的内容。

Fiddle

Answer 3

您需要在按钮上设置选定的开启和关闭状态，以了解您选择了哪些，然后再次单击它们将其关闭（如果我正确理解您的问题）。因此，在您的点击事件中，您将设置如下内容：

if ($this.hasClass('selected')) {
    $this.removeClass('selected');
} else {
    $this.addClass('selected');
}

然后循环浏览链接以显示所选内容。

我更新了你的小提琴https://jsfiddle.net/f7srx0dd/2/

显示/隐藏div以使用jquery过滤

3 个答案: