Comment afficher/trier des divs spécifiques en fonction du choix de l'utilisateur

Question

Désolé si le titre ne décrit pas exactement ce que j'essaie de faire. Je suis un novice à tout cela pour dire le moins! Pour vous aider à comprendre ce que j'essaie d'accomplir, veuillez lire l'exemple ci-dessous.

J'ai une liste de divs, dont chacun peut avoir une série de "tags" comme je les appelle. Pour cet exemple, j'utiliserai le rouge, le bleu et le vert comme balises possibles. Chaque tag est également associé à un bouton, sur lequel l'utilisateur peut cliquer pour filtrer les divs affichés. Lorsque le bouton est sur "on" il affichera les divs avec cette balise spécifique, mais quand il est "off" il cachera le contenu avec ce tag. C'est à moins que le contenu n'ait un autre tag actuellement activé.

Rouge: ON

Bleu: OFF

Vert: ON

---

DIV 1: Red

DIV 2: Bleu

DIV 3: vert

DIV 4: Rouge, Bleu

DIV 5: Bleu, Vert

DIV 6: Vert, Rouge

Parce que l'étiquette bleue est désactivée chaque DIV sera affiché sauf DIV 2. La raison pour laquelle affiche toujours DIV 4 et DIV 5 parce que les étiquettes Rouge et Vert sont toujours activées. Si vous deviez éteindre l'étiquette rouge, seules les DIVs 3, 5 et 6 s'afficheront, puisque seul le vert est activé.

Je suis sûr qu'il y a une façon beaucoup plus élégante d'expliquer ce qui précède, mais j'espère que cela a été compris. J'ai cherché une solution qui permettrait d'atteindre cet objectif, mais je ne l'ai pas encore trouvé. Il y a beaucoup de filtres de liste qui utilisent des boîtes de recherche mais cela ne fonctionnerait pas pour mes besoins.

Si quelqu'un pouvait me diriger dans la bonne direction quant à ce que je pourrais utiliser pour accomplir cela, je l'apprécierais!

Answer 1

Je pense que la façon la plus simple de faire cela est que vos "tags" soient directement implémentés en tant que classes. Tout div peut avoir plusieurs classes, alors class = "red blue" ne pose aucun problème.

Ensuite, vous avez juste besoin de javascript pour changer l'affichage de la classe à 'none' si approprié. Examinez la fonction getElementsByClassName() de javascript ou le sélecteur de classes de jQuery pour obtenir toutes les divs avec une classe égale à celle qui vient d'être modifiée, passez en revue et calculez la nouvelle valeur de chaque attribut de style "display".

Answer 2

Donc ce que vous avez ici est une logique OU:

Si le rouge ou le bleu ou le vert ne se éteint pas, montrer la div. Par conséquent, cela signifie que lorsque vous faites une boucle dans les divs, vous devez avoir une boucle interne pour chaque tag, laquelle boucle interne peut se rompre lorsque vous tombez sur une étiquette qui n'est pas désactivée, ce qui signifie que la div est affichée . Sinon, si vous n'avez trouvé aucune étiquette qui n'est pas désactivée après avoir passé toutes les balises, vous devez masquer la div.

Answer 3

Je ne pense pas que cela puisse être résolu avec CSS seul puisque vous avez des DIV avec plusieurs couleurs. Vous pourriez simuler cela en CSS, mais ce ne serait probablement pas très élégant. Je n'ai pas travaillé avec JavaScript depuis longtemps ou pas du tout, donc la solution peut avoir besoin d'être nettoyée ou la syntaxe devra peut-être être vérifiée, mais je pense avoir un cadre potentiel avec lequel vous pourriez travailler.

Vous définissez vos trois boutons de couleur, et avez onClick (ou équivalent jQuery) à une fonction.

<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')" /> 

Ensuite, pour les DIVs, vous pouvez les mettre à l'intérieur d'une boucle (il peut y avoir une meilleure solution ... comme peut-être faire la fonction faire la boucle passer par courir à nouveau il est donc pas toujours).

Voici la fonction. Avant les boutons, bien sûr.

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

En théorie (puisque je ne suis pas ce test), nous changeons une variable à zéro parce que nous voulons comparer les valeurs pour les div s qui ont de multiples couleurs. Voici comment vous pouvez vérifier les deux couleurs, je crois:

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

Comme vous pouvez le voir ici, il faut les deux boutons à presser avant qu'il ne soit caché, ce qui est l'effet désiré.

Vous pouvez faire beaucoup, beaucoup de variations selon ce que vous essayez de faire ou ce qui est le mieux organisé, mais je pense que cela pourrait être utile en tant que base libre.

Answer 4

Voici un exemple de travail sur la façon dont vous pourriez faire ceci:

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

Bien sûr, cela pour modifier vos besoins, mais comme vous le voyez, il est assez facile et petit à implemnt. En utilisant le tableau tags, vous pouvez avoir autant de combinaisons de balises que vous le souhaitez.