jQuery Girl
  1. jQuery Girl
  3. Comment faire fonctionner mes boutons “prev” et “next” sur la pagination
Intereting Posts
Afficher et masquer un div quand l’élément est dans la vue jQuery: Bascule la rotation de div sur la fonction de clic Comment sortinger la colonne par nom, ascendant et descendant Trouver la position de la cible après le positionnement isotopique Identifier tous les éléments présents à la position spécifiée Comment écrire un algorithme simple de traversée d’arbres DOM en précommande dans jQuery? Augmenter la taille de police de la page Web entière lors d’un événement de clic de bouton à l’aide de jquery Comment insérer le mot précédent, le mot actuel et le mot suivant dans une balise à l’aide de jQuery? Pourquoi jQuery .change () ne déclenche-t-il pas les boutons radio désélectionnés à la suite de la sélection d’un homonyme? L’action Scala ne s’exécute pas pour stocker l’object json sur ajax Submit dans la firebase database Postgresql à l’aide de Play Framework et Scala? jQuery $ () vs. document.getElementByID – différences Deux parameters pour supprimer une ligne dans JqGrid Popover contenu ne fonctionne pas avec angularjs ng-click Pourquoi mon caché n’est-il pas vraiment caché? Une action du contrôleur qui renvoie une vue partielle insère la page de connexion lorsque l’autorisation échoue.

Comment faire fonctionner mes boutons “prev” et “next” sur la pagination

 
$(document).ready(function(){ var $pageItem = $(".pagination li") $pageItem.click(function(){ $pageItem.removeClass("active"); $(this).addClass("active"); }); });

Maintenant, j’utilise la pagination bootstrap et ajoute une fonctionnalité de personnalisation utilisant jQuery pour rendre la page “active” lorsque je clique dessus, ce qui signifie la page actuelle.

Cependant, les boutons “prev” et “next” seront également “actifs”. Que puis-je faire pour changer uniquement de page “active” lorsque vous cliquez sur le bouton “prev” ou “suivant” et de ne pas append “actif” aux boutons “prev” et “suivant”.

Ajoutez une classe aux boutons précédent et suivant, c’est-à-dire une liste des éléments de votre cas et utilisez .not() pour les exclure. 

 $(document).ready(function() { var pageItem = $(".pagination li").not(".prev,.next"); var prev = $(".pagination li.prev"); var next = $(".pagination li.next"); pageItem.click(function() { pageItem.removeClass("active"); $(this).not(".prev,.next").addClass("active"); }); next.click(function() { $('li.active').removeClass('active').next().addClass('active'); }); prev.click(function() { $('li.active').removeClass('active').prev().addClass('active'); }); });

Vous avez juste besoin d’append simplement si condition pour les boutons Suivant et Précédent 

 $(document).ready(function(){ var $pageItem = $(".pagination li") $pageItem.click(function(){ console.log($(this).html().indexOf('Next')); if($(this).html().indexOf('Next') <= -1 && $(this).html().indexOf('Previous') <= -1){ $pageItem.removeClass("active"); $(this).addClass("active"); } }); });

Ce code sera redirigé vers les URL suivantes et précédentes, testez-le avec les liens réels de votre projet. 

  $(document).on('click', '.prev', function () { //1- get first element to check if it has class 'active', // to prevent class 'active' from moving to prev button on click, // if explanation isn't clear try removing if(){} to see it. const first = $(this).siblings().first(); if (!first.hasClass('active')) { //2- search 
  • 's to get the one that has 'active' class. const active = $(this).siblings('.active'); //3- get the previous item of the 
  •  to move to. const prevItem = active.prev(); //4- get href of the item to redirect to. const link = prevItem.children('a').prop('href'); //5- remove 'active' class from the current 
  •  and give it to prev 
  • . active.removeClass('active'); prevItem.addClass('active'); //6- redirect to href of the new 
  • . window.location.href = link; } }); $(document).on('click', '.next', function () { const last = $(this).siblings().last(); if (!last.hasClass('active')) { const active = $(this).siblings('.active'); const nextItem = active.next(); const link = nextItem.children('a').prop('href'); active.removeClass('active'); nextItem.addClass('active'); window.location.href = link; } });
    •