JavaScript Afficher/Masquer comme des Filtres à la liste des divs

Cherche à créer un script Javascript qui agit comme un filtre sur une liste de divs.
Pour exemple, voici le but de balisage...

<a href="#" onclick="">Filter Item 1</a>
<a href="#" onclick="">Filter Item 2</a>
<a href="#" onclick="">Filter Item 3</a>
<a href="#" onclick="">Filter Item 4</a>
<a href="#" onclick="">Filter Item 5</a>

<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>

Je veux être en mesure de cliquer sur le lien pour le Point 1, et ne montrer que le Point 1 de la vrd et masquer tous les autres divs, cliquez sur le lien de l'Article 2, et de montrer uniquement le Point 2 divs et masquer tous les autres divs et ainsi de suite. J'ai vu plusieurs scripts, mais rien qui, apparemment, se transforme divs correspondant à la classe on/off de cette manière.

OriginalL'auteur deconspray | 2011-02-16

Cela peut être fait facilement en Jquery, à la suite de devrait fonctionner pour vous, mais vous devez modifier votre code html comme suit

<a href="#" class="link" id="1">Filter Item 1</a>
<a href="#" class="link" id="2">Filter Item 2</a>
<a href="#" class="link" id="3">Filter Item 3</a>
<a href="#" class="link" id="4">Filter Item 4</a>
<a href="#" class="link" id="5">Filter Item 5</a>

<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>

et javascript comme suit

$(document).ready(function(){
 $(".link").click(function(e){
  $("." + e.currentTarget.id).toggle()
 }
});

OriginalL'auteur Anto Binish Kaspar

Vous pouvez utiliser du jQuery bascule. ci-dessous est simple exemple:

    $(document).ready(function() {
        $('#IDOfLink').click(function() {
            $('.class1').toggle("slow");//switch to show/hide when clicked
            //hide other div u wish
        });

        $('#anotherLinkID').click(function() {
            $('.class2').toggle("fast");//switch to show/hide when clicked
            //hide other div u wish
        });
        //...etc...
    });

OriginalL'auteur KJYe.Name

1

Solution très simple:
```
<a href="#" onclick="$('DIV').hide(); $('DIV.1').show(); return false;">Filter Item 1</a>
```
Cela, bien sûr, permet de masquer tous les autres div de la page, donc vous devriez donner à tous les autres ou de les mettre à l'intérieur un autre div. Ensuite, le code pourrait être:
```
<a href="#" onclick="$('#filtered DIV').hide(); $('#filtered DIV.1').show(); return false;">Filter Item 1</a>

<div id="filtered">
    <div class="1"></div>
    ...
</div>
```
C'est un peu rapide et sale. Ne devrait pas vraiment l'utiliser.

OriginalL'auteur Silver Light

Définir un ID pour chaque lien, puis d'attribuer un événement onclick. De là, vous pouvez filtrer les divs en utilisant le lien cliqué ID.

Quelque chose comme ceci (http://jsfiddle.net/pJRek/1/)

Balisage:

<a href="#" class="bound" id="group_1">Filter Item 1</a>
<a href="#" class="bound" id="group_2">Filter Item 2</a>
<a href="#" class="bound" id="group_3">Filter Item 3</a>
<a href="#" class="bound" id="group_4">Filter Item 4</a>
<a href="#" class="bound" id="group_5">Filter Item 5</a>

<div class="group_1">Item 1</div>
<div class="group_1">Item 1</div>
<div class="group_2">Item 2</div>
<div class="group_3">Item 3</div>
<div class="group_1">Item 1</div>
<div class="group_4">Item 4</div>
<div class="group_4">Item 4</div>
<div class="group_1">Item 1</div>
<div class="group_5">Item 5</div>

Et script:

$(document).ready(function(){
    var links = $('.bound');
    var divs = $('div');
    links.click(function(event){
       divs.hide();
       divs.filter('.' + event.target.id).show();
    });
});

OriginalL'auteur unclenorton

1

Si vous configurez votre HTML:
```
<div id="controls">    
  <a href="#" id="1">Filter Item 1</a>
  <a href="#" id="2">Filter Item 2</a>
  <a href="#" id="3">Filter Item 3</a>
  <a href="#" id="4">Filter Item 4</a>
  <a href="#" id="5">Filter Item 5</a>
</div>
<div id="items">
  <div class="1">Item 1</div>
  <div class="1">Item 1</div>
  <div class="2">Item 2</div>
  <div class="3">Item 3</div>
  <div class="1">Item 1</div>
  <div class="4">Item 4</div>
  <div class="4">Item 4</div>
  <div class="1">Item 1</div>
  <div class="5">Item 5</div>
</div>
```
Puis votre code jQuery peut être aussi simple que:
```
$(function(){
    $("#controls a").click(function() {
        $("#items").find("." + this.id).toggle();   
    });
  });
```
Bien sûr, vous voulez ajouter une indication visuelle qu'un filtre est activé et désactivé.
Vous ne voulez pas associer les éléments avec chaque lien par le biais de l'id/classes, mais au lieu d'utiliser du jQuery de stockage de données, en fonction de vos besoins.

Un exemple de travail, testé dans firefox, ici: http://jsfiddle.net/mwolfetech/GetRV/

Edit: Cette solution est similaire à Anto Binish Kaspar du, surtout ne différant que par la
comment le html est modifié. Je pense que les divs donné sont susceptibles d'être une bonne structure de votre document, de toute façon, et élimine le besoin pour des classes de contrôle. C'est toujours une décision de conception--l'équilibrage de la div (division structurelle) vs classe (par catégories). En outre, theres aucun besoin pour extraire l'id de l'objet d'événement comme jQuery fournit la this de référence.

OriginalL'auteur mwolfetech
0

Leur donner à tous une autre classe (par exemple item) et ensuite faire la cliquez sur masquer tous les item et de montrer l'ensemble de la valeur sélectionnée.

OriginalL'auteur Andrew Jackman

Vous devez vous connecter pour publier un commentaire.