Switch valeur boléeen d'un dataset au click

Hello !
Sur un projet d'une pagination, j'essaye de faire en sorte que mon dataset change (en booléen) si je clique sur tel ou tel page (genre si je clique sur la page 2, celui ci passe en true et toute les autres passe en false) mais j'avoue que je bug un peu dessus depuis un moment (et après quelques recherches internet bien sur !)

Voici une partie de mon JS actuel :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

const nbPages = Math.ceil(resultat.length/7); for(l=0;l<nbPages;l++){ const page = document.createElement('li'); page.className = 'page page'+[l+1]; page.textContent = [l+1]; page.dataset.num = l+1; page.dataset.act = false; const pre_article = (l*7)+1; const der_article = (l+1)*7; pages.appendChild(page); page.addEventListener('click',(e)=>{ for(p=0;p<resultat.length;p++){ const page_actuelle = der_article/7; if(page_actuelle === parseInt(page.dataset.num)){ page.dataset.act = true; }else{ page.dataset.act = false; } }) }

---

pour la moment ca passe bien en true mais ne repasse pas en false si je clique ailleurs :/

débuguez pour voir si le code de l'évènement se lance bien au clic et si les variables contiennent les valeurs prévues.

c'est "normal" : quand tu cliques sur un element, tu le mets a jour, mais tu ne mets jamais a jour les AUTRES...
ps : t'as oublie l'accolade fermante de ton for()
de plus : comme tu sais sur quel element tu cliques, pas besoin de calculer la page_actuelle. et tu peux donc simplifier ton code

Code:

---

1 2 3 4 5 6

page.addEventListener('click', () => { document.querySelectorAll('.page').forEach(li => { li.dataset.act = false; }); page.dataset.act = true; });

---

Super ! Ca marche super Doksuri ! Merci ! Bon par contre j'avoue que j'ai un peu de mal à comprendre ta simplification ! Je pense que tu as pu constater que je n'étais pas un développeur confirmé et donc j'ai un peu du mal a saisir comment fonctionne le code... Et je suis pas super fan de c/c un code sans trop le comprendre.

De plus je n'arrive pas à faire des changement css avec cette version... :

Code:

---

1 2 3 4 5 6

document.querySelectorAll('.page').forEach(li => { li.dataset.act = false; li.style.background = 'transparent'; }); page.dataset.act = true; page.style.background = '#cccccc';

---

Ici le but était de marqué la page actuelle visité avec un fond gris et pas de fond sur les autres pages, ca marche mais ca perturbe le hover du css de base que j'avais.... :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.page{ border-radius: 50%; background: transparent; width: 3rem; height: 3rem; transition: all 300ms ease; box-shadow: none; text-align: center; margin: 0 1.5rem; display: flex; flex-direction: column; justify-content: center; } .page:hover{ background: var(--blueback); box-shadow: 8px 8px 15px -8px rgba(0,0,0,0.75); transform: scale(105%); cursor: pointer; } .page:active{ box-shadow: none; background: var(--bluehov); transform: scale(105%); }

---

Code:

---

1 2 3 4 5 6

page.addEventListener('click', () => { // quand on clique sur une des page document.querySelectorAll('.page').forEach(li => { // je selectionne toutes les pages (elements qui ont la classe "page"), et je boucle dessus li.dataset.act = false; // pour la page en cours de bouclage, je passe l'attribut "act" a false }); // fin de boucle page.dataset.act = true; // pour la page sur laquelle on a clique, je passe l'attribut "act" a true });

---

j'espere que ca t'aide a mieux comprendre

pour ce qui est du CSS, tu peux appliquer un style a un element qui a un attribut (pas besoin d'ajouter des classes a gogo)
tu peux par exemple faire :

Code:

---

1 2 3

.page[act="true"]{ background: #cccccc; }

---

Merci pour tes explications, oui je comprends mieux c'est juste le (li => {li.dataset.act = false;}) que je trouve un peu technique (la construction pas le contenue)

Sinon j'ai testé ta méthode css mais ça ne marche pas :(
Dommage je trouvais ça bien :)

Code:

---

1 2 3

.page[act="true"]{ background: #deeefd; }

---

J'ai essayé en ajoutant !important ça change rien :(

Bonjour,

Citation:

---

Sinon j'ai testé ta méthode css mais ça ne marche pas :(

---

il y a une petite coquille, à savoir que lorsque l'on écrit element.dataset.quelquechose = la_valeur cela génère un attribut <balise data-quelquechose = "la_valeur">...</balise>.

Pour le cibler en CSS il faut donc écrire

Code:

---

1 2 3

balise[data-quelquechose="la_valeur"]{ // le style qui va bien }

---

Citation:

---

Envoyé par Doksuri

pour ce qui est du CSS, tu peux appliquer un style a un element qui a un attribut (pas besoin d'ajouter des classes a gogo)

---

et inversement, tu peux gérer cela avec une classe sans passer par un attribut ce qui me semblerait plus logique pour appliquer du CSS.