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

Posted 2023-05-09

【中文标题】使用带有 jquery 的按钮的内容过滤器仍然不起作用？

【英文标题】：Content filter using button with jquery still doesn't work?

【发布时间】：2021-01-09 04:31:39

【问题描述】：

你好我想问一下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>

【参考方案1】：

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

$(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>

【讨论】：

哦，是的，我弄错了，我只想使用类更改我的帖子。以及如何使类别“全部”默认？从您创建的代码中，它们都消失了。正如我上面解释的，在我们点击其他类别之前，默认显示所有类别

把$('.all').show()放在$(document).ready(function()

下面

哦，我明白了，所以我不需要使用 if 条件吗？谢谢兄弟