JavaScript显示/隐藏为div列表的filter
希望创建一个类似于div列表中的filter的Javascript。 例如，这是预期的标记……
Filter Item 1 Filter Item 2 Filter Item 3 Filter Item 4 Filter Item 5 Item 1 Item 1 Item 2 Item 3 Item 1 Item 4 Item 4 Item 1 Item 5 我希望能够单击项目1的链接，并仅显示项目1 div并隐藏所有其他div，单击项目2的链接，并仅显示项目2 div并隐藏所有其他div等等。 我已经看过几个类似的脚本，但似乎并没有以这种方式打开/关闭类匹配的div。
这可以在Jquery中轻松完成，以下应该适合您，但您必须修改您的html如下
Filter Item 1 Filter Item 2 Filter Item 3 Filter Item 4 Filter Item 5 Item 1 Item 1 Item 2 Item 3 Item 1 Item 4 Item 4 Item 1 Item 5
和javascript如下
$(document).ready(function(){ $(".link").click(function(e){ $("." + e.currentTarget.id).toggle() } });
你可以使用jQuery的切换 。 以下是简单的例子：
$(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... });
为每个链接设置ID，然后分配onclick事件。 在那里，您可以使用点击的链接ID过滤掉div。
像这样的东西（ http://jsfiddle.net/pJRek/1/ ）
标记：
Filter Item 1 Filter Item 2 Filter Item 3 Filter Item 4 Filter Item 5 Item 1 Item 1 Item 2 Item 3 Item 1 Item 4 Item 4 Item 1 Item 5
和脚本：
$(document).ready(function(){ var links = $('.bound'); var divs = $('div'); links.click(function(event){ divs.hide(); divs.filter('.' + event.target.id).show(); }); });
如果您将HTML设置为：
Item 1 Item 1 Item 2 Item 3 Item 1 Item 4 Item 4 Item 1 Item 5
然后你的jQuery代码可以简单如下：
$(function(){ $("#controls a").click(function() { $("#items").find("." + this.id).toggle(); }); });
当然，您需要添加一个可视指示，指示filter是否打开和关闭。 您可能不希望通过id / classes将项目与每个链接相关联，而是根据您的需要使用jQuery的数据存储。
一个工作示例，在firefox中测试，在这里： http ： //jsfiddle.net/mwolfetech/GetRV/
编辑：此解决方案类似于Anto Binish Kaspar ，主要区别在于如何修改html。 我认为给出的div很可能是一个很好的文档结构，并且不需要额外的控制类。 这始终是一个设计决策 – 平衡div（用于结构划分）与class（用于，类别）。 此外，由于jQuery提供了this引用，因此无需从事件对象中提取id。
给他们所有其他类（例如item ）然后使点击隐藏所有item并显示所有选定的值。