Discussion :

[johnny3]

Bonjour,

Je vous écris car ça fait deux jours que je bute sur un problème que je ne parviens pas à résoudre malgré plusieurs stratégies envisagées.

J'ai 4 liens correspondant à des catégories. Il n'y en aura jamais d'autres.

J'ai des articles associés à ces catégories.

Ce que je dois faire est, en principe, très simple: quand j'arrive sur ma page, je vois tous les articles de toutes les catégories. Quand je clique sur une catégorie, ça la désactive et les articles associés à cette catégorie sont cachées. Si je reclique sur cette catégorie, les articles réapparaissent.

C'est donc un comportement de bouton on/off.

Au départ, j'ai tenté de faire un principe de checkbox qui a fonctionné comme je le voulais. Je cochais des cases et, au moment où une case était cochée, la page était rechargée et, dans l'url, les numéros des catégories cochées étaient séparées par des virgules. Mais ce n'était pas un système optimisé, et je ne voulais pas que la page soit rechargée à chaque fois. J'ai tenté de passer par de l'ajax, mais je suis trop débutant et je préfère passer par jquery avec des hide() et show() si possible.

Du coup, j'ai décidé de faire en sorte que les articles aient une classe portant le nom de la catégorie afin de pouvoir faire un filtre directement par la classe. Mais j'ai des problèmes de sélecteur jquery.

Voici mon template:

On a d'abord les catégories affichées par ce code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul class="nav" id="filtre">
                <li class="active"><a href="#">Tout</a></li>
                <?php foreach ($categories as $category): ?>
                    <li><a href="#" class="<?php echo $category->getName(); ?>"><?php echo $category->getName() ?></a></li>
                <?php endforeach ?>
            </ul>

puis les articles affichés ainsi, avec juste avant le titre de la catégorie:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php foreach ($categories as $category): ?>
            <?php if ($category->getArticles()->count() > 0): ?>
                <h3 id="portfolio_category">
                    <a href="#" class="<?php echo $category->getName(); ?>">
                        <?php echo $category->getName(); ?>
                    </a>
                </h3>
 
                <ul id="portfolio">
                    <?php foreach ($category->getArticles() as $article): ?>
                        <li class="<?php echo strtolower($article->getCategory()) ?>"><a href="#"><?php echo $article->getTitle() ?></a></li>
                    <?php endforeach ?>
                </ul>
            <?php endif; ?>
        <?php endforeach ?>

Mon code jquery est le suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function() {
    $('#filtre li a').click(function() {	// On clique sur un filtre
 
        $('#filtre li').removeClass('active');	// Supprimer la classe "active" sur tous les liens du filtre
        $(this).parent().addClass('active');	// Ajouter la classe "active" sur le parent (li) du "a" cliqué
 
        var valeurFiltre = $(this).text().toLowerCase();	// On stocke dans une variable la valeur du lien cliqué, en minuscule
 
        $('#portfolio li').hide();	// Cacher tous les articles
 
        if (valeurFiltre == 'tout') {	// On teste si le filtre appliqué est sur "tout"
            $('#portfolio li').show('slow');  	// Alors on montre tous les articles
        }
        else {  
            $('#portfolio li').each(function() {    // Sinon c'est que l'on est dans une catégorie
                JE BLOQUE
            });
        }  
 
        return false;	// Bloque l'action initiale du lien
    });
 
});

Voilà, c'est là où je bloque. Je voudrais pouvoir faire quelque chose du style: "si j'ai cliqué sur une catégorie portant telle nom (ou tel numéro), alors il faut appliquer le comportement toggle.

Je me dis qu'il faudrait alors que je fasse quelque chose comme ça dans mon template:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul id="portfolio_<?php echo $article->getCategoryId()?>">
                    <?php foreach ($category->getArticles() as $article): ?>
                        <li class="<?php echo strtolower($article->getCategory()) ?>"><a href="#"><?php echo $article->getTitle() ?></a></li>
                    <?php endforeach ?>
                </ul>

Mais je ne sais pas comment, dans mon Jquery, transmettre cette valeur pour dire "c'est ce li sur lequel je veux agir".

J'espère que vous pourrez m'aider, car là, je cale complètement.

Merci par avance,
John

[MaitreKaio]

Bonjour,
J'ai créé une fiddle qui je pense répond à ta demande. Note que je n'ai pas suivi ta démarche qui me semblait un peu complexe pour la tâche à réaliser.
Tu peux étudier le code, qui brille par sa simplicité je pense, et l'adapter à tes besoins. J'ai essayé de coller à ton cas de figure, mais j'ai modifié des petites choses et j'ai enlevé toutes les classes dont je ne me servais pas.
On peut même faire encore plus simple en enlevant les show() et hide() et en ajoutant simplement une classe CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

hidden {display:none}.

Mais j'ai supposé que tu voulais conserver la petite animation faire avec un hide("slow") par exemple.
Une dernière chose: attention dans ton code à ne jamais créer des éléments portant le même identifiant, comme par exemple ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<?php if ($category->getArticles()->count() > 0): ?>
    <h3 id="portfolio_category">...</h3>
    <ul id="portfolio">...</ul>
<?php endif; ?>