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

Answer 2

您可以使用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...
    });

Answer 3

非常简单的解决方案：

<a href="#" onclick="$('DIV').hide(); $('DIV.1').show(); return false;">Filter Item 1</a>

当然，这将隐藏页面上的所有其他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>

Answer 4

为每个链接设置ID，然后分配onclick事件。在那里，您可以使用点击的链接ID过滤掉div。

像这样（http://jsfiddle.net/pJRek/1/）

标记：

<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>

脚本：

$(document).ready(function(){
    var links = $('.bound');
    var divs = $('div');
    links.click(function(event){
       divs.hide();
       divs.filter('.' + event.target.id).show();
    });
});

Answer 5

如果您将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>

然后你的jQuery代码就像这样简单：

$(function(){
    $("#controls a").click(function() {
        $("#items").find("." + this.id).toggle();   
    });
  });

当然，您需要添加一个可视指示，指示过滤器是否打开和关闭。您可能不希望通过id / classes将项目与每个链接相关联，而是根据您的需要使用jQuery的数据存储。

在firefox中测试的一个工作示例：http://jsfiddle.net/mwolfetech/GetRV/

编辑：此解决方案与Anto Binish Kaspar's类似，主要区别在于如何修改html。我认为给出的div很可能是一个很好的文档结构，并且不需要额外的控制类。这始终是一个设计决策 - 平衡div（用于结构划分）与class（用于，类别）。此外，由于jQuery提供this引用，因此无需从事件对象中提取id。

Answer 6

为他们提供所有其他课程（例如item），然后点击隐藏所有item并显示所有选定的值。

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

6 个答案: