Discussion :

[d3LTa7]

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 :

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
 
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 :/

[mathieu]

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.

[Doksuri]

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 javascript :

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

1
2
3
4
5
6
page.addEventListener('click', () => {
    	document.querySelectorAll('.page').forEach(li => {
      li.dataset.act = false;
      });
        page.dataset.act = true;
    });

[d3LTa7]

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 :

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

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 css :

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
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%);
    }

[Doksuri]

Code javascript :

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

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 css :

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

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

[d3LTa7]

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 css :

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

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

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

[NoSmoking]

Bonjour,

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 css :

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

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

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.