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

【问题标题】：How to display/sort specific divs based on user choice如何根据用户选择显示/排序特定的 div
【发布时间】：2010-07-19 20:30:08
【问题描述】：

抱歉，如果标题没有准确描述我正在尝试做的事情。至少可以说，我是一个新手！为了帮助您了解我要完成的工作，请阅读下面的示例。

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

红色：开

蓝色：关闭

绿色：开

DIV 1：红色

DIV 2：蓝色

DIV 3：绿色

DIV 4：红、蓝

DIV 5：蓝色、绿色

DIV 6：绿色，红色

因为标记 Blue 已关闭，除 DIV 2 之外的每个 DIV 都会显示。它仍然显示 DIV 4 和 DIV 5 的原因是因为标记 Red 和 Green 仍然打开。如果您也关闭标签红色，则只会显示 DIV 3、5 和 6，因为只有绿色被打开。

我确信有一种更优雅的方式来解释上述内容，但希望它能够理解这一点。我一直在寻找可以实现这一目标的解决方案，但还没有找到。有很多使用搜索框的列表过滤器，但这不能满足我的需求。

如果有人能指出我可以使用什么来完成此任务的正确方向，我将不胜感激！

【问题讨论】：

标签： javascript jquery html css

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

【讨论】：

【解决方案2】：

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

然后你只需要一些 javascript 来将类的显示更改为“无”（如果合适的话）。

查看 javascript 的 getElementsByClassName() 函数或 jQuery 的类选择器，以获取所有类的类等于刚刚更改的所有 div，然后遍历它们并计算每个“显示”样式属性的新值。

【讨论】：

使用类是我一开始尝试的方法，尽管我承认我只是使用了没有 Javascript 的 CSS（这是作为一种概念证明来完成的）。我遇到的问题是，如果蓝色关闭而绿色打开，“蓝绿色”就会关闭。如果我们使用上面的示例，则只会显示 DIV 1、3 和 6，因为它们没有 Blue 作为标签。我想这就是 CSS 处理它的方式。我查看了 getElementsByClassName ，它快让我发疯了 :) document.getElementById() 有效，但 document.getElementsByClassName() 无效。继续...
... 我正在使用此处提供的 .getElementsByClassName 代码：robertnyman.com/2008/05/27/… 如果我使用 document.getElementsByClassName("Red").style.display = "none";用上面的代码为我拉 ClassName 不应该工作吗？这对我来说只是千块拼图中的一块。
@Edvard D：我实际上并不是一个 javascript 专家，但我认为您必须遍历 getElementsByClassName 的返回，而不是仅仅尝试 .style.display 返回的数组。（如果我错了，请纠正我）。

【解决方案3】：

所以你这里有一个逻辑或：

如果红色 OR 蓝色 OR 绿色没有关闭，则显示 div。

因此，这意味着当您循环遍历 div 时，您需要为每个标签创建一个内部循环，当您偶然发现未关闭的标签时，该内部循环可能会中断，这意味着 div 被显示。否则，如果在遍历所有标签后没有发现没有关闭的标签，则必须隐藏该div。

【讨论】：

如果我理解正确的话，JavaScript 函数应该被分成与我有标签一样多的部分，所以在上面的例子中，三个。每一个都应该有一个循环来遍历所有可能的组合，例如红色标签（红色、红色蓝色、蓝色红色、红色绿色、绿色红色）。对于我添加的每个标签，我都需要为其他标签添加另一种可能性，因此如果添加了新标签 Yellow，我将需要两个新组合（红黄、黄红）。这是正确的还是我完全错过了你的解释？
我记得你的标签被收集在一个对象 {} 中（即标签['Blue'] - true/false）。每当打开或关闭标签时，您都会调用一个遍历 div 的函数，并且对于每个 div，您调用一个返回 true/false 的函数，具体取决于其中是否至少有一个标签未关闭。所以说如果你的 div 中有“tag name,”对象，这个内部函数将调用 div.querySelectorAll('.tag') 和每个返回元素的内部文本节点用作对标签集合的查找以找出它们各自的状态。

【解决方案4】：

我认为这不能单独使用 CSS 解决，因为您有一些具有多种颜色的 DIV。你可以在 CSS 中模拟它，但它可能不会很优雅。我已经很长时间没有使用 JavaScript 了，或者根本没有使用过 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;
    }
}

理论上（因为我没有对此进行测试），我们将变量更改为零，因为我们想要比较具有多种颜色的divs 的值。我相信这就是您可以检查两种颜色的方法：

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

正如您在此处看到的，它需要在隐藏之前按下两个按钮，这是您想要的效果。

你可以根据你想要做的事情或最有组织的事情做很多很多变化，但我认为这可能有助于作为一个松散的基础。

【讨论】：