使用带有 jquery 的按钮的内容过滤器仍然不起作用？

Question

你好我想问一下javascript。我使用一个按钮创建了一个内容过滤器功能。首先，我想显示默认内容“全部”。当我点击“技术”类别时，内容全部消失，只显示“技术”内容。当我点击“教育”类别时，科技内容消失，只显示“教育”内容。

我已经编写了如下代码，但这仍然不是我想要的。问题是，当我点击一个类别时，旧值仍然出现，每个类别只显示 1 个内容。

如何使用 jquery 或纯 JS 制作我想要的过滤器？

$(document).ready(function(){
    $('button').on("click" , function(){
        let target = $(this).data('target');
      let content = $('.list-content').data('content');
      
      console.log(target);
      
      $('#' + target).show();
  });
});

.list-content{
  display:none;
}

.list-content .show{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-tag">
  <button data-target="all">All</button>
  <button data-target="tech">Tech</button>
  <button data-target="industry">Industry</button>
  <button data-target="edu">Education</button>
</div>

<div class="content">
  <div class="list-content" id="all">Lorem ipsum All.</div>
  <div class="list-content" id="all">Lorem ipsum All.</div>
  <div class="list-content" id="all">Lorem ipsum All.</div>
  <div class="list-content" id="all">Lorem ipsum All.</div>
  
  <div class="list-content" id="tech">Lorem ipsum Tech.</div>
  <div class="list-content" id="tech">Lorem ipsum Tech.</div>
  <div class="list-content" id="tech">Lorem ipsum Tech.</div>
  <div class="list-content" id="tech">Lorem ipsum Tech.</div>
  
  <div class="list-content" id="industry">Lorem ipsum Industry.</div>
  <div class="list-content" id="industry">Lorem ipsum Industry.</div>
  <div class="list-content" id="industry">Lorem ipsum Industry.</div>
  <div class="list-content" id="industry">Lorem ipsum Industry.</div>
  
  <div class="list-content" id="edu">Lorem ipsum Edu.</div>
  <div class="list-content" id="edu">Lorem ipsum Edu.</div>
  <div class="list-content" id="edu">Lorem ipsum Edu.</div>
  <div class="list-content" id="edu">Lorem ipsum Edu.</div>
</div>

Answer 1

1. Id 在整个页面中应该是唯一的。
2. 先隐藏所有列表以删除旧列表。

$(document).ready(function(){
    $('.all').show();
    $('button').on("click" , function(){
        let target = $(this).data('target');
      let content = $('.list-content').data('content');
      
      console.log(target);
      
      $('.list-content').hide(); // You should hide all the contents before showing the filtered ones.
      $('.' + target).show();
  });
});

.list-content{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-tag">
  <button data-target="all">All</button>
  <button data-target="tech">Tech</button>
  <button data-target="industry">Industry</button>
  <button data-target="edu">Education</button>
</div>

<div class="content">
  <div class="list-content all">Lorem ipsum All.</div>
  <div class="list-content all">Lorem ipsum All.</div>
  <div class="list-content all">Lorem ipsum All.</div>
  <div class="list-content all">Lorem ipsum All.</div>
  
  <div class="list-content tech">Lorem ipsum Tech.</div>
  <div class="list-content tech">Lorem ipsum Tech.</div>
  <div class="list-content tech">Lorem ipsum Tech.</div>
  <div class="list-content tech">Lorem ipsum Tech.</div>
  
  <div class="list-content industry">Lorem ipsum Industry.</div>
  <div class="list-content industry">Lorem ipsum Industry.</div>
  <div class="list-content industry">Lorem ipsum Industry.</div>
  <div class="list-content industry">Lorem ipsum Industry.</div>
  
  <div class="list-content edu">Lorem ipsum Edu.</div>
  <div class="list-content edu">Lorem ipsum Edu.</div>
  <div class="list-content edu">Lorem ipsum Edu.</div>
  <div class="list-content edu">Lorem ipsum Edu.</div>
</div>