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

Question

对不起，如果标题没有准确描述我正在尝试做什么。 至少我是这样的新手！ 为了帮助您了解我想要完成的任务，请阅读以下示例。

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

红色：开

蓝色：关闭

绿色：开

第1部分：红色

第2部分：蓝色

第3部分：绿色

第四部分：红色，蓝色

第5节：蓝色，绿色

第6部分：绿色，红色

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

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

如果有人可以指出我正确的方向，我可以用来实现这一点，我会很感激！

Answer 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数组，您可以拥有任意数量的标签组合。

Answer 2

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

然后你只需要一些javascript就可以将类的'display'更改为'none'。

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

Answer 3

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

如果未关闭红色或蓝色或绿色，则显示div。

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

Answer 4

我不认为这可以单独使用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";
}

正如你在这里看到的那样，它需要在隐藏之前按下BOTH按钮，这是你想要的效果。

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

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

问题描述

4 个解决方案

解决方案1
1 2010-07-29 20:06:04

解决方案2
0 2010-07-19 20:43:42

解决方案3
0 2010-07-19 20:44:05

解决方案4
0 2010-07-28 16:55:49

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

问题描述

4 个解决方案

解决方案1 1 2010-07-29 20:06:04

解决方案2 0 2010-07-19 20:43:42

解决方案3 0 2010-07-19 20:44:05

解决方案4 0 2010-07-28 16:55:49

解决方案1
1 2010-07-29 20:06:04

解决方案2
0 2010-07-19 20:43:42

解决方案3
0 2010-07-19 20:44:05

解决方案4
0 2010-07-28 16:55:49