Affichage de plusieurs selon leur class ou name

[studiobali.archi]

Bonjour,

Je découvre le javascript à travers le livre Tout Javascript.

Je travaille actuellement sur un projet pour notre association :
J'aimerai proposer un site type tumblr avec des posts successifs et chronologiques selon les activités de l'asso, les projets en cours, etc...
J'ai créé un menu déroulant proposant des filtres à travers différentes checkbox.
Via ces checkbox, j'aimerai n'afficher que certains divs selon le filtre choisi.

Par exemple j'ai un post XY montrant un projet de " logement social" incluant un travail sur le "paysage" et le sigle du projet s'appelle "GIL"
Quand le coche la CB "Logement Social" la div doit d'afficher.
Mais elle doit également s'afficher quand je coche la CB "paysage" ou encore la CB "GIL"
Quand je coche la CB "paysage", la div de mon post XY s'affiche, mais également un autre post antérieur ayant la class "logement social".
J'espère que mon histoire est claire.. !

J'avais réussi cette affaire en me limitant à du html et du css, mais le problème c'était que les divs devait être soeur et donc mes CB restaient en haut de page et il fallait rescroller tout en haut pour changer les choix...

Alors en javascript, avec un ID ça marche d'enfer, seulement il ne peut y avoir qu'une div par id et qu'une id par div... Or j'ai besoin d'afficher plusieurs div, et que les divs répondent à différentes id, ou class du coup...

Et comme GetElementsbyClassName renvoi un tableau, je n'arrive pas à leur modifier le style.display
Alors j'ai approché un résultat avec ForEach()... Mais j'ai piqué ça sur un forum sans vraiment comprendre...

Ca commence à faire longtemps que je tente mais rien ne fonctionne vraiment!!!
Alors j'en appelle à la communauté! Pouvez-vous m'aider ?

Je pense que c'est très mal écrit mais je vous mets mon essai JS :

function FonctionAffchgTout() {

var cbTout = document.getElementById("cbTout");
var PostTout = document.querySelectorAll(".tout");


if (cbTout.checked === true){
PostTout.forEach(function(dsplTout) {
if (dsplTout.style.display === "none") {
dsplTout.style.display = "block";
} else {
dsplTout.style.display = "none";
}
}), false;
}
}

Je ne comprends pas le "false" à la fin, ça fait parti du bout de code que j'ai copié sans vraiment le comprendre, c'est sans doute pour arrêter la boucle ?

Enfin vous voyez, je galère...

Merci pour vos conseils !
bonne soirée

[webmaster]

Bonjour,

Le ,false est un paramètre optionnel de foreach
Ici, il ne sert à rien.

Pour manipuler des éléments DIV, j'aime bien utiliser les attributs data-xxxx
Cela permet de stocker des informations directement dans le document.
On peut les retrouver ensuite avec dataset
https://www.toutjavascript.com/referenc ... ataset.php

Ici, cela permettrait par exemple d'enregistrer des informations de catégories du type :
data-categorie="piscine;terrasse;animaux"

[studiobali.archi]

Bonsoir,

Merci beaucoup pour votre réponse je vais tester ça!

Bonne soirée,

PY

[studiobali.archi]

reBonsoir,

Alors j'ai essayé ça :

HTML :

<input type="checkbox" id="cbTout" onclick="FonctionAffchgTout()" checked /> tout<br>


<div class="post" style="display: block" data-cat="Tout Indiv"> post Tout Indiv
</div>

<div class="post" style="display: block" data-cat="Tout Pays"> post Tout Pays
</div>

<div class="post" style="display: block" data-cat="Tout Indiv Pays"> post Tout Indiv Pays
</div>

JS :

var cbTout = document.getElementById("cbTout");
var PostTout = document.querySelectorAll(".post");


if (cbTout.checked === true){
PostTout.forEach(function() {
if ('Tout' in PostTout.dataset.CAT === "true") {
PostTout.style.display = "block";
} else {
PostTout.style.display = "none";
}
})
}


La console m'informe que l'élément CAT n'est pas reconnu...
Est ce que vous pensez que mon approche est la bonne ?

Merci encore...

Py

[webmaster]

Bonjour

La fonction document.querySelectorAll retourne un tableau d'élements
Il faut donc l'accéder par un indice postTout

J'ai écrit ceci plutot comme condition :

Code : Tout sélectionner

if (PostTout[i].dataset.cat.split(" ").includes("Tout")) {
  PostTout[i].style.display = "block";
} else {
  PostTout[i].style.display = "none";
}

[studiobali.archi]

Bonjour,

Merci pour le conseil, cela ouvre de nouvelles pistes!

Avec le même html
J'ai tenté le JS suivant :

Code : Tout sélectionner

function FonctionAffchgTout() {

	var cbTout = document.getElementById("cbTout");
	var Post = document.querySelectorAll(".post");

if (cbTout.checked === true){

for (var i = 0; i < Post.length; i++) {
if (Post[i].dataset.cat.split(" ").includes("Tout")) {
Post[i].style.display = "block";
} else {
Post[i].style.display = "none";
}
}
}
}	

Au début j'ai testé votre code sans définir i, et la console me retournait un undefined sur i
Maintenant que j'ai définit i
L'élément split est retourné comme undefined... je ne comprends pas pourquoi ?
Et dans un autre essai, l'élément includes également...

Si j'ai bien compris, l'indice i permet d'isoler un élément du tableau retourné par l'appel document.querySelectorAll, en commençant par la première div de class .post, c'est bien ça?
Un fois isolé il traite l'élément et passe au suivant jusqu'à épuisement du code ?
J'ai donc défini i grâce à length puisque mes posts n'auront pas un chiffre constant mais croissant.

Comme i rentre en jeu, j'ai pensé que la boucle forEach n'était plus utile ? Est-ce correct ?

Si nous résolvons ce problème le suivant m'interroge à l'avance.

Dans mon html, j'ai défini le statut "checked" à mon <input> afin que lorsque la page se lance, tous les posts soient affichés. mais pour le moment, lors des tests, pour activé la fonction, je dois désactiver mon <input> "Tout" puis le réactiver afin de lancer la fonction...
Faut-il que la définition du statut "checked" de l'input soit définit après le chargement du JS ? Si oui cela veut dire qu'il faudrait une ligne de code JS qui cocherait l'input à la fin du chargement du JS ? Pouvez-vous m'aider sur ce point ?

Merci encore!


Pierre Yves

[webmaster]

Bonjour,

Je viens de retester avec un exemple complet, je n'ai pas d'erreur et le 2eme div s'efface bien au clic sur la checkbox :

Code : Tout sélectionner

<input type="checkbox" id="cbTout" onclick="FonctionAffchgTout()" checked /> tout<br>

<div class="post" style="display: block" data-cat="Tout Indiv"> post Tout Indiv
</div>

<div class="post" style="display: block" data-cat="Pays"> post Tout Pays
</div>

<div class="post" style="display: block" data-cat="Tout Indiv Pays"> post Tout Indiv Pays
</div>

<script>

function FonctionAffchgTout() {

    var cbTout = document.getElementById("cbTout");
    var Post = document.querySelectorAll(".post");
    if (cbTout.checked === true){
        console.log(cbTout);

        for (var i = 0; i < Post.length; i++) {
            console.log(Post[i].dataset.cat.split(" ").includes("Tout"))
            if (Post[i].dataset.cat.split(" ").includes("Tout")) {
                Post[i].style.display = "block";
            } else {
                Post[i].style.display = "none";
            }
        }
    }
}	

</script>