基于锚标签的jQuery过滤项目

Question

我有一个 四个 a 标签 我想使用过滤器 (隐藏& 显示) 我的内容。

鉴于我正在使用的HTML，什么是最好的方法？我自己也尝试过这样的方法，但是我的jQuery经常是重复的，而且不起作用。

场景

1. 所有四个内容部分都默认显示
2. 选择锚标签会显示相关内容，隐藏其他3个标签
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>

Answer 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>

Answer 2

在标签上使用id，然后用jQuery调用id.click(function(){Do showhide code here!})

Answer 3

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