JavaScript 显示/隐藏为过滤器到 div 列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5017836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript Show/Hide as Filters to list of divs
提问by deconspray
Looking to create Javascript that acts like a filter on a list of divs. For instance, here's the intended markup...
希望创建 Javascript，它的作用类似于 div 列表上的过滤器。例如，这是预期的标记......
<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>
I want to be able to click on the link for Item 1, and show only Item 1 divs and hide all other divs, click the link of Item 2, and show only Item 2 divs and hide all other divs and so on. I've seen several similar scripts but nothing that seemingly turns divs matching the class on/off in this manner.
我希望能够单击项目 1 的链接，并仅显示项目 1 div 并隐藏所有其他 div，单击项目 2 的链接，仅显示项目 2 div 并隐藏所有其他 div，依此类推。我见过几个类似的脚本，但似乎没有以这种方式打开/关闭与类匹配的 div。
回答by Anto Binish Kaspar
This can be done easily in Jquery, following should work for you, but you have to modify your html as following
这可以在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>
and javascript as follows
和 javascript 如下
$(document).ready(function(){
$(".link").click(function(e){
$("." + e.currentTarget.id).toggle()
}
});
回答by unclenorton
Set an ID for each link, then assign an onclick event. There you can filter out divs using the clicked link ID.
为每个链接设置一个 ID，然后分配一个 onclick 事件。在那里您可以使用单击的链接 ID 过滤掉 div。
Something like this (http://jsfiddle.net/pJRek/1/)
像这样的东西（http://jsfiddle.net/pJRek/1/）
Markup:
标记：
<a href="#" class="bound" id="group_1">Filter Item 1</a>
<a href="#" class="bound" id="group_2">Filter Item 2</a>
<a href="#" class="bound" id="group_3">Filter Item 3</a>
<a href="#" class="bound" id="group_4">Filter Item 4</a>
<a href="#" class="bound" id="group_5">Filter Item 5</a>
<div class="group_1">Item 1</div>
<div class="group_1">Item 1</div>
<div class="group_2">Item 2</div>
<div class="group_3">Item 3</div>
<div class="group_1">Item 1</div>
<div class="group_4">Item 4</div>
<div class="group_4">Item 4</div>
<div class="group_1">Item 1</div>
<div class="group_5">Item 5</div>
And script:
和脚本：
$(document).ready(function(){
var links = $('.bound');
var divs = $('div');
links.click(function(event){
divs.hide();
divs.filter('.' + event.target.id).show();
});
});
回答by mwolfetech
If you setup your HTML as:
如果您将 HTML 设置为：
<div id="controls">
<a href="#" id="1">Filter Item 1</a>
<a href="#" id="2">Filter Item 2</a>
<a href="#" id="3">Filter Item 3</a>
<a href="#" id="4">Filter Item 4</a>
<a href="#" id="5">Filter Item 5</a>
</div>
<div id="items">
<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>
</div>
Then your jQuery code can be as simple as:
那么你的 jQuery 代码可以像这样简单：
$(function(){
$("#controls a").click(function() {
$("#items").find("." + this.id).toggle();
});
});
Of course, you will want to add a visual indication that a filter is toggled on and off. You may not want to associate the items with each link through id/classes, but instead use jQuery's data storage, depending on your needs.
当然，您会希望添加一个视觉指示，表明过滤器是打开和关闭的。您可能不想通过 id/classes 将项目与每个链接相关联，而是根据您的需要使用 jQuery 的数据存储。
A working example, tested in firefox, here: http://jsfiddle.net/mwolfetech/GetRV/
一个在 Firefox 中测试的工作示例，在这里：http: //jsfiddle.net/mwolfetech/GetRV/
Edit: This solution is similar to Anto Binish Kaspar's, mainly differing only in
how the html is modified. I think that the divs given are likely to be a good structure for your document anyway, and eliminates the need for extra classes for control. This is always a design decision--balancing div (for structural division) vs class (for, categories). Additionally, theres no need to extract the id from the event object as jQuery provides the thisreference.
编辑：此解决方案类似于Anto Binish Kaspar 的解决方案，主要区别仅在于 html 的修改方式。我认为给定的 div 无论如何都可能是您文档的良好结构，并且不需要额外的控制类。这始终是一个设计决策——平衡 div（用于结构划分）与类（用于类别）。此外，由于 jQuery 提供了this引用，因此无需从事件对象中提取 id 。
回答by u476945
You can use jQuery's toggle. below is simple example:
您可以使用 jQuery 的toggle。下面是一个简单的例子：
$(document).ready(function() {
$('#IDOfLink').click(function() {
$('.class1').toggle("slow");//switch to show/hide when clicked
//hide other div u wish
});
$('#anotherLinkID').click(function() {
$('.class2').toggle("fast");//switch to show/hide when clicked
//hide other div u wish
});
//...etc...
});
回答by Silver Light
Very simple solution:
非常简单的解决方案：
<a href="#" onclick="$('DIV').hide(); $('DIV.1').show(); return false;">Filter Item 1</a>
This, ofcourse, will hide all the other div's on page, so you should give the all some other class or put inside another div. Then the code could be:
这当然会隐藏页面上的所有其他 div，因此您应该给所有其他类或放入另一个 div。那么代码可能是：
<a href="#" onclick="$('#filtered DIV').hide(); $('#filtered DIV.1').show(); return false;">Filter Item 1</a>
<div id="filtered">
<div class="1"></div>
...
</div>
回答by Andrew Hymanman
Give them all another class (for example item) and then make the click hide all itemand show all of the selected value.
给他们所有另一个类（例如item），然后单击隐藏所有item并显示所有选定的值。
