Question

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

我有一个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，因为只打开了绿色。

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

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

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就可以将类的显示更改为'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";
}

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

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

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

4 个答案: