problème pagination onglets

[tadrativa]

bonjour tout le monde,
Depuis des semaines, je travaille sur un système d'onglets paginés. Je suis presque au résultat désiré.
Ce que je veux avoir ce sont des onglets (nombre indéfini) qui peuvent avoir un nombre de pages variables. Par exemple, l'onglet 1 pourrait avoir parfois 1, 2, 3 voire plus de pages ; idem pour les autres.
Le problème que je rencontre se trouve dans "page précédente" lorsqu'il y a plus de 2 pages. Je n'arrive pas à revenir à la page précédente.
Voici le JavaScript :

document.addEventListener('DOMContentLoaded', function () {
// Afficher le contenu par défaut
afficherContenu('onglet1');

// Attacher les gestionnaires d'événements aux onglets
var onglets = document.querySelectorAll('.onglet');
onglets.forEach(function (onglet) {
onglet.addEventListener('click', function (event) {
var ongletId = event.currentTarget.getAttribute('data-onglet');
afficherContenu(ongletId);
});
});

// Attacher les gestionnaires d'événements à la navigation "page précédente" "page suivante"
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(function (navPage) {
navPage.addEventListener('click', function () {
var ongletId = navPage.getAttribute('data-onglet');
var page = parseInt(navPage.getAttribute('data-page'));
afficherContenu(ongletId, page);
});
});
});

function afficherContenu(onglet, page = 1) {
// Masquer tous les contenus d'onglets
var ongletsContenus = document.querySelectorAll('.contenu-onglet');
ongletsContenus.forEach(function (contenu) {
contenu.style.display = 'none';
});

// Afficher le contenu spécifique
var contenuId = onglet + '-' + page;
var contenu = document.getElementById(contenuId);
if (contenu) {
contenu.style.display = 'block';
gestionPagination(onglet, page);
}
}

function gestionPagination(ongletId, page) {
// Désactiver toutes les nav-pages
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(function (navPage) {
navPage.style.pointerEvents = 'none';
});

// Activer la nav-page suivante si elle existe
var pageSuivante = document.querySelector('.nav-page[data-onglet="' + ongletId + '"][data-page="' + (page + 1) + '"]');
if (pageSuivante) {
pageSuivante.style.pointerEvents = 'auto';
}

// Activer la nav-page précédente si nécessaire
if (page > 1) {
var pagePrecedente = document.querySelector('.nav-page[data-onglet="' + ongletId + '"][data-page="' + (page - 1) + '"]');
if (pagePrecedente) {
pagePrecedente.style.pointerEvents = 'auto';
}
}
}

MERCI pour votre aide.

[EllisPacocha]

Pour corriger ces erreurs, vous pouvez essayer de modifier votre code comme suit tunnel rush:

Code : Tout sélectionner

fonction gestionPagination(tabId, page) {
// Désactive toutes les pages de navigation
var navPages = document.querySelectorAll('.nav-page');
navPages.forEach(fonction (navPage) {
navPage.style.pointerEvents = 'aucun';
});

// Active la page de navigation suivante si elle existe
var nextPage = document.querySelector('.nav-page[data-tab="' + tabId + '"][data-page="' + (page + 1) + '"]');
si (page suivante) {
nextPage.style.pointerEvents = 'auto';
}

// Active la page de navigation précédente si nécessaire
si (page > 1) {
var pagePrecedente = document.querySelector('.nav-page[data-tab="' + tabId + '"][data-page="' + (page - 1) + '"]');
si (page précédente) {
pagePrecedente.style.pointerEvents = 'auto';
}
}
}

[vernakuhlman]

Vous aggravez les choses en appelant managePagination tout en essayant de désactiver les événements de pointeur pour les objets de navigation « page précédente ». L'événement click n'est pas déclenché lorsque vous cliquez surbasketball stars « page précédente » pour cette raison.

[tadrativa]

Merci beaucoup.
Le problème est résolu.