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

Question

我正在尝试完成此操作：

我有一些类的多个 DIV(比如说 A 类、B 类、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>

Answer 1

试试这个：

目录：

<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();
});
});