基于锚标签的jQuery过滤项目答案

【问题标题】：jQuery filter items based on anchor tag基于锚标签的jQuery过滤项目
【发布时间】：2020-05-15 00:10:12
【问题描述】：

我有一个四个a 标签，我想使用过滤器（隐藏和显示）我的内容。

考虑到我正在使用的 HTML，最好的方法是什么？我自己尝试过实现这一点，但我的 jQuery 经常重复并且不起作用。

场景

默认显示所有四个内容部分
选择一个锚标签将显示相关内容并隐藏其他3个
选择锚标记两次将显示所有内容（步骤 1）

<div class="left mob-filter">
  <a href="#" class="filter m-performance" data-filter="1">Performance</a>
  <a href="#" class="filter m-music" data-filter="2">Music</a>
  <a href="#" class="filter m-art" data-filter="3">Art</a>
  <a href="#" class="filter m-food" data-filter="4">Food</a>
</div>

<div class="m-performance"><p>Performance Content</p></div>
<div class="m-music"><p>Performance Content</p></div>
<div class="m-art"><p>Performance Content</p></div>
<div class="m-food" ><p>Performance Content</p></div>

【问题讨论】：

你能改变 HTML 吗？您已经说过“给定 HTML”，但有更好的方法（例如将 link+div 与 data- 属性而不是同一个类链接）（即添加 data-filter="1" 到您的 m-performance div）

标签： javascript html jquery show-hide

【解决方案1】：

对你的 html 进行一些修改，这就是你想要的；

$(function() {

  $("a.filter").on("click", function(e) {
    e.preventDefault();
    var a = $(this);
    $("div.content div").hide(); //hide all
    $("div.content div." + a.data("filter")).show(); //show clicked
  });

  $("a.filter").on("dblclick", function(e) {
    e.preventDefault();

    $("div.content div").show(); //show all
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left mob-filter">
  <a href="#" class="filter" data-filter="m-performance">Performance</a>
  <a href="#" class="filter" data-filter="m-music">Music</a>
  <a href="#" class="filter" data-filter="m-art">Art</a>
  <a href="#" class="filter" data-filter="m-food">Food</a>
</div>

<div class="content">

  <div class="m-performance">
    <p>Performance Content</p>
  </div>
  <div class="m-music">
    <p>Music Content</p>
  </div>
  <div class="m-art">
    <p>Art Content</p>
  </div>
  <div class="m-food">
    <p>Food Content</p>
  </div>
</div>

【讨论】：

这很好但是不允许我取消选择过滤器或添加多个过滤器。我想我会采用一种适用于 input 元素的普通 JS 方法。
双击任意一个标签会取消选择过滤器，添加多个过滤器是什么意思？

【解决方案2】：

在 a 标签上使用 id 并使用 jQuery 调用 id.click(function(){ 在这里显示/隐藏代码！ })

【讨论】：

更改一个 for 按钮并在每个按钮上放置一个唯一的 ID，如然后在 javascript 中像这样使用 jQuery $("#performance").click (function(){$(".m-music).css("display","none"}); 重复给其他人

【解决方案3】：

我之前遇到过类似的事情，我所做的不是使用 href，而是使用 4 个按钮。每个都有一个 onclick 行为，在那个 onclick 中，您可以使用它们的 id 来定位不同的 div，就像您在上面所做的那样，并执行诸如显示内容或隐藏内容之类的操作。但是你也可以对 a 标签做类似的事情。

【讨论】：

你有一个例子 - 也许在 JSFiddle 上？