如何根据用户选择显示/排序特定的div

时间:2010-07-19 20:30:08

标签: javascript jquery html css

很抱歉,如果标题没有准确描述我正在尝试做的事情。至少我是这样的新手!为了帮助您了解我想要完成的任务,请阅读以下示例。

我有一个div列表,每个div都可能有一系列“标签”,我会称之为。对于这个例子,我将使用红色,蓝色和绿色作为可能的标签。每个标签还有一个链接到它的按钮,用户可以单击该按钮来过滤显示的div。当按钮处于“打开”状态时,它将显示具有该特定标签的div,但是当它“关闭”时,它将隐藏具有该标签的内容。这是除非内容中有另一个当前打开的标记。

红色:开启

蓝色:关闭

绿色:开启


DIV 1:红色

DIV 2:蓝色

DIV 3:绿色

DIV 4:红色,蓝色

DIV 5:蓝色,绿色

DIV 6:绿色,红色

由于关闭标签Blue,除了DIV 2之外,每个DIV都会显示。它仍然显示DIV 4和DIV 5的原因是因为红色和绿色标签仍然打开。如果你要关闭标签红色,那么只显示DIV 3,5和6,因为只打开了绿色。

我确信有更优雅的方式来解释上述内容,但希望它能说明问题。我一直在寻找能够实现这一目标的解决方案,但尚未找到它。有很多列表过滤器使用搜索框,但这不适合我的需要。

如果有人可以指出我正确的方向,我可以用来完成这个,我会很感激!

4 个答案:

答案 0 :(得分:1)

以下是有关如何执行此操作的工作示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

   <script type="text/javascript"> 
   //<!--
      $(document).ready(function() {
         var buttons = {
            'red': $('<input type="button"></input>').val('RED: on'),
            'green': $('<input type="button"></input>').val('GREEN: on'),
            'blue': $('<input type="button"></input>').val('BLUE: on')
         };
         var tags = [];
         var _updateTaggedElements = function() {
            // somewhat optimized if...then...else
            if (0 == tags.length) {
               $('#taggedElements > .red,.green,.blue').hide();
            } else {
               $('#taggedElements')
                  .find('.' + tags.join(',.')).show().end()
                  .find(':not(.' + tags.join(',.') + ")").hide()
               ;
            }
         };

         $.each(buttons, function(c,el) {
            tags.push(c); // all tagged elements initially visible...
            $('#buttons').append(el.click(function() {
               var state = /off$/.test(el.val());
               var tagIndex = $.inArray(c, tags);
               el.val(c.toUpperCase() + ": " + (state ? 'on' : 'off'));

               if (state) {
                  if (-1 == tagIndex) {
                     tags.push(c);
                  }
               } else if (-1 != tagIndex) {
                  tags.splice(tagIndex, 1);
               }

               _updateTaggedElements();
            }));
         });

      });
   //-->
   </script>    
   <title>Button selector test</title>
</head> 
<body> 
   <div id="buttons"></div>

   <div id="taggedElements">
      <div class="red">DIV 1: Red</div>
      <div class="blue">DIV 2: Blue</div>
      <div class="green">DIV 3: Green</div>
      <div class="red blue">DIV 4: Red, Blue</div>
      <div class="blue green">DIV 5: Blue, Green</div>
      <div class="green red">DIV 6: Green, Red</div>
   </div>

</body> 
</html>

当然,根据您的需要进行修改,但正如您所看到的,实现起来相当容易和小。使用tags数组,您可以拥有任意数量的标记组合。

答案 1 :(得分:0)

我认为最简单的方法是将“标签”直接实现为类。任何div都可以有多个类,所以class =“red blue”没问题。

然后,您只需要一些javascript就可以将类的显示更改为'none'(如果适用)。

查看javascript的getElementsByClassName()函数或jQuery的类选择器,以获取所有类似于刚改变的类的div,并迭代它们并计算每个“display”样式属性的新值。

答案 2 :(得分:0)

所以你在这里有一个逻辑OR:

如果未关闭红色或蓝色或绿色,请显示div。

因此,这意味着当你循环遍历div时,你需要为每个标记设置一个内部循环,每当你偶然发现一个没有关闭的标记时,内部循环就会中断,这意味着显示了div。否则,如果您在通过所有标签后未找到任何未关闭的标签,则必须隐藏div。

答案 3 :(得分:0)

我不认为这可以单独用CSS解决,因为你有一些DIV有多种颜色。您可以在CSS中模拟它,但它可能不会非常优雅。我在很长一段时间内都没有使用过JavaScript,所以解决方案可能需要一些整理或语法可能需要检查,但我认为我有一个可以使用的潜在框架。

您可以设置三个颜色按钮,并将onClick(或等效的jQuery)设置为函数。

<input type="button" id="buttonRed" name="buttonRed" onclick="theSwitch('red')" />
<input type="button" id="buttonGreen" name="buttonGreen" onclick="theSwitch('green')" />
<input type="button" id="buttonBlue" name="buttonBlue" onclick="theSwitch('blue')" />

然后对于DIV,你可以把它们放在一个循环中(可能有一个更好的解决方案......比如可能让函数让循环再次通过,所以它并不总是在运行)。

这是功能。当然,在按钮之前。

function theSwitch(color) {
    if (color === 'red') {
        var redStatus = 0;
        return redStatus;
    }
}

理论上(因为我没有对此进行测试),我们将变量更改为零,因为我们想要比较具有多种颜色的div的值。这就是你如何检查两种颜色,我相信:

if (redStatus === 0 && greenStatus === 0) {
    document.getElementById("divRedGreen").style.display = "none";
}

正如你在这里看到的,它需要在隐藏之前按下两个按钮,这是你想要的效果。

你可以做很多很多变化,这取决于你想做什么或者最有组织的事情,但我认为这可以作为一个松散的基础。