All geek questions in one place

How to display / sort specific divs based on user selection

Sorry if the title doesn’t exactly describe what I'm trying to do. At least I'm a beginner. To help you understand what I'm trying to accomplish, read the example below.

I have a list of divs, each of which can have a series of "tags" as I call them. In this example, I will use Red, Blue, and Green as possible tags. Each tag has a button associated with it, which the user can click to filter which divs are displayed. When the button is "on", it will display divs with this particular tag, but when it is "off", it will hide the content with this tag. That is, if the content does not have another tag that is currently enabled.

Red: ON

Blue: OFF

Green: ON

DIV 1: Red

DIV 2: blue

DIV 3: Green

DIV 4: red, blue

DIV 5: blue, green

DIV 6: green, red

Since the Blue tag is disabled, each DIV will be displayed except for DIV 2. The reason it still displays DIV 4 and DIV 5 is because the Red and Green labels are still on. If you disabled the Red label, then only DIVs 3, 5 and 6 would be displayed, since only the green color is on.

I'm sure there is a much more elegant way to explain the above, but hopefully it got the point. I was looking for a solution that will achieve this, but have not yet found it. There are many list filters that use search fields, but this will not work for my needs.

If someone can point me in the right direction as to what I could use to achieve this, I would appreciate it!

+3
4

, :

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

, - "" . div , class= " " .

javascript, "none", .

javascript getElementsByClassName() jQuery, div , , "display".

0

, :

, div.

, , div , , , , , div. , , , div.

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";
}

, BOTH BOTH, , .

, , , , , , .

0

Source: https://habr.com/ru/post/1755380/

More articles:


All Articles