Boutons on/off et affichage d'articles au clic
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:
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:
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:
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:
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
