JavaScript 显示/隐藏为 div 列表的过滤器

Question

希望创建像 div 列表上的过滤器一样的 Javascript。 例如，这是预期的标记...

<a href="#" onclick="">Filter Item 1</a>
<a href="#" onclick="">Filter Item 2</a>
<a href="#" onclick="">Filter Item 3</a>
<a href="#" onclick="">Filter Item 4</a>
<a href="#" onclick="">Filter Item 5</a>

<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>

我希望能够单击项目 1 的链接，仅显示项目 1 div 并隐藏所有其他 div，单击项目 2 的链接，并仅显示项目 2 div 并隐藏所有其他 div 等等.我见过几个类似的脚本，但似乎没有以这种方式打开/关闭与类匹配的 div。

Answer 1

这可以在 Jquery 中轻松完成，以下内容应该适合您，但您必须按以下方式修改您的 html

<a href="#" class="link" id="1">Filter Item 1</a>
<a href="#" class="link" id="2">Filter Item 2</a>
<a href="#" class="link" id="3">Filter Item 3</a>
<a href="#" class="link" id="4">Filter Item 4</a>
<a href="#" class="link" id="5">Filter Item 5</a>

<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>

和javascript如下

$(document).ready(function(){
 $(".link").click(function(e){
  $("." + e.currentTarget.id).toggle()
 }
});