[Résolu] Problème pagination ( JQuery )

Bonjour,
Je cherchais une pagination a mettre pour mon site. Au lieux de créez 6 Pages différentes, mettre les 6 contenue dans la même ! Et la Bingo j'ai réussi avec un peux d'aide de mon amis Google

Mais !

Oui il y a toujours des mais.. Effectivement les " <div> " se déplaces correctement avec " <span> " Previous and Next. J'ai réussi a faire le déplacement du " . active " par contre la ou je plante.. C'est que je n'arrive pas a me redirigé directement vers un .content précis..
C'est à dire, que j'ai beau cliquer sur les chiffres de 1 à 6 sans résultat. Je n'ai pas vraiment réussi a trouvé du code pouvant m'aider..
Bref

Voici mon code :

( Ou Codepen : http://codepen.io/Golderen/pen/NNYQaM )

<div class="content">Mon premier contenue</div>
<div class="content">Mon deuxième contenue</div>
<div class="content">Mon troisième contenue</div>
<div class="content">Mon quatrième contenue</div>
<div class="content">Mon cinquième contenue</div>
<div class="content">Mon sixième contenue</div>

<div id="page">
  <span><a class="prev" href="#">Previous</a></span>
  <ul>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
  </ul>
  <span><a class="next" href="#">Next</a></span>
</div>

.content {
  width: 280px;
  height: 200px;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active a {
  color: blue;
}

ul {
  list-style-type: none;
}

li {
  float: left;
  margin: 10px 5px;
}

a {
  color: #000;
  text-decoration: none;
}

span {
  float: left;
  cursor: pointer;
  margin: 10px 5px;
}

nombrePage = 1;
var i = 1;
showPage = function(pagination) {
    $(".content").hide();
    $(".content").each(function(n) {
      if (n >= nombrePage * (pagination - 1) && n < nombrePage * pagination)
        $(this).show();
    });
  }
  // Changement de .content
showPage(i);
$(".prev").click(function() {
  if (i != 1) {
    showPage(--i);
  }
});
// Déplacement vers la Gauche
$(".prev").click(function() {
  if ($("li.active").prev().length > 0) {
    $("li.active").removeClass("active").prev("li").addClass("active");
  }
});

// Changement de .content
$(".next").click(function() {
  if (i < ($('.content').length) / 1) {
    showPage(++i);
  }
});
// Déplacement vers la Droite
$(".next").click(function() {
  if ($("li.active").next().length > 0) {
    $("li.active").removeClass("active").next("li").addClass("active");
  }
});

Merci d'avance !!
Modifié par Golderen (15 Apr 2016 - 13:23)

Bonjour,

Effectivement, le clic sur les liens numérotés n'est pas prévu, donc forcément...

Je te propose cette solution.

Petit conseil, évite de gérer plusieurs fois le même évenement sur un élément plusieurs fois, du type :

$(".prev").click(function() {
  // ...
});
$(".prev").click(function() {
  // ...
});

Tu risques d'avoir des surprises à un moment...

Super merci beaucoup pour le code !

Et pourquoi le fais d'avoir plusieurs événement sur un même éléments peux être problématique ?

Et une dernière petite question a quoi sert la ligne :

console.clear()

dans le code que tu m'as proposé ? ^^"

Golderen a écrit :
Et pourquoi le fais d'avoir plusieurs événement sur un même éléments peux être problématique ?

En terme de lisibilité, de maintenabilité, et de performance, si tu le gères plusieurs fois, tu risques à un moment donné de te poser des questions sur le pourquoi du comment. Ensuite, tu va coller autant écouteurs que d'action, alors qu'un suffira.

Golderen a écrit :
Et une dernière petite question a quoi sert la ligne :

console.clear()

dans le code que tu m'as proposé ? ^^"

Ah, tu peux virer la ligne... c'est juste que codepen ne vire pas les console au fur et à mesure des différents tests, alors je le fais à la main.