单击按钮时仅显示具有 x 类的 DIV

【问题标题】：Show only DIVs with class x on button click单击按钮时仅显示具有 x 类的 DIV
【发布时间】：2019-09-03 21:29:48
【问题描述】：

我正在努力完成这项工作：

我有多个带有一些类的 DIV（比如 class-a、class-b、class-c 等）现在我有像“show-a”、“show-b”、“show-c”等按钮. 当我单击一个按钮时，我想显示所有具有该类的 DIV，并隐藏所有没有该类的 DIV。

<div class="class-a class-b class-c class-d>Text</div>
<div class="class-a class-b class-d>Text</div>
<div class="class-c class-d>Text</div>
<div class="class-b class-c>Text</div>

<button>Show all A</button>
<button>Show all B</button>
<button>Show all C</button>
<button>Show all D</button>

【问题讨论】：

你问的问题太宽泛了。我们无法回答它，不知道您使用哪种语言来进行流量控制或简单的方程式。如前所述，我建议您查看任何 js 库/框架（javascript、jquery、angular ...）是否可以操作 DOM 来执行您想要的操作（查找具有 X 类的 div 并添加不显示的样式)

标签： html class filter show

【解决方案1】：

试试这个：

HTML：

<div class="class-a class-b class-c class-d">1</div>
<div class="class-a class-b class-d">2</div>
<div class="class-c class-d"
>3</div>
<div class="class-b class-c">4</div>

<button class="show-a">Show all A</button>
<button class="show-b">Show all B</button>
<button class="show-c">Show all C</button>
<button class="show-d">Show all D</button>

CSS：

.class-a, .class-b, .class-c, .class-d{
  display: none;
}

JS：

$(document).ready(function(){
  $(".show-a").click(function(){
    $(".class-a").toggle();
  });
});
$(document).ready(function(){
  $(".show-b").click(function(){
    $(".class-b").toggle();
  });
});
$(document).ready(function(){
  $(".show-c").click(function(){
    $(".class-c").toggle();
  });
});
$(document).ready(function(){
  $(".show-d").click(function(){
    $(".class-d").toggle();
  });
});

【讨论】：

好的，谢谢。但是如何自动隐藏未点击类的DIV？