Discussion :

[Vincent668]

Bonjour à toutes et tous,
Dans la liste ci-dessous j’aimerais que chaque ligne s’affiche en fonction d’une année et reste de manière indéfinie.

Code html :

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

1
2
3
4
5
6
7
 <div class="col-lg-2 pt-5"><h2>Archives</h2>                          
  <ul id="archive" class="list-group list-group-horizontal mx-auto">
  <li class="list-group-item list-group-item-action list-group-item-light 2022"><a href="#" class="">2022</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light 2021"><a href="#" class="">2021</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light 2020"><a href="#" class="">2020</a></li>
  <li class="list-group-item list-group-item-action list-group-item-light 2019"><a href="#" class="">2019</a></li>
  </ul></div>

J’utilise le script ci dessous que j’ai glaner sur le net, il fonctionne bien et en même temps il me semble qu’il y à moyen de le rendre plus simple. D’éviter aussi certaine répétition de ce code ( il y aura une vingtaines lignes).

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
22
23
24
25
26
27
28
29
30
31
32
<script>
$(function() {
  var current = new Date("2023");
  var expiry = new Date()
  if (current.getTime() > expiry.getTime()) {
    $().hide();
  } else if (current.getTime() < expiry.getTime()) {
    $('.2022').show();
  }
    var current = new Date("2022");
  var expiry = new Date()
  if (current.getTime() > expiry.getTime()) {
    $().hide();
  } else if (current.getTime() < expiry.getTime()) {
    $('.2021').show();
  }
    var current = new Date("2021");
  var expiry = new Date()
  if (current.getTime() > expiry.getTime()) {
    $().hide();
  } else if (current.getTime() < expiry.getTime()) {
    $('.2020').show();
  }
   var current = new Date("2020");
  var expiry = new Date()
  if (current.getTime() > expiry.getTime()) {
    $().hide();
  } else if (current.getTime() < expiry.getTime()) {
    $('.2019').show();
  }
  }, 0);
</script>

Page démo :https://sumto.be/archives_presse/date_test.html

Merci et belle journée à toutes et tous.
Vincent

[NoSmoking]

Bonjour,
as tu essayé quelque chose de simple comme la sélection via la classe CSS :
Exemple :

Code :

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

1
2
3
const année = "2019";
$("li").hide();
$("li." + année).show();

[Vincent668]

Bonjour NoSmoking,
Merci pour votre intervention.
j’ai testé ce que vous proposé et en même temps je ne suis pas sûr de bien faire. Malgré de nombreux test cela ne fonctionne pas.
N’étant pas toujours très clair dans mes demandes, je précise :
J’aimerais que le script affiche une ligne de la liste en fonction de l’année qui précède la class de cette ligne.
Par exemple cette ligne :

Code :

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

<li class="2022"><a href="#">2022</a></li>

La class est 2022 donc en 2023 le script doit afficher cette ligne.
Précision En css cette ligne (la liste) est display :none ;
Bien à vous

[Toufik83]

Bonjour,

Si je comprends bien, vous voulez afficher seulement les lignes ayant l'année est inférieur à celle de expire, non ?

Code :

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

1
2
3
4
5
6
let expire= new Date();
$(".list-group-item")
  .filter(function() {
    return parseInt($(this).attr('class').replace(/.[^\d]/g, '').trim()) < expire.getFullYear();
  })
  .show();

L'expression régulière /.[^\d]/g permet de remplacer n'importe quel caractère de la classe des li.list-group-item à part les entiers.

Attention, le script risque de ne pas retourner le résultat souhaité si vous ajoutez un autre nombre dans les classes des <li>, sinon vous pouvez appliquer un split sur les classes pour ne récupérer que le dénier élément (2022,2021,2020...) ou bien mieux, utiliser un data-annee

[Vincent668]

Bonjour et merci Toufik,
Le script vous met sur la mauvaise voie. Je l’ai trouvé sur le net et par hasard il fonctionne bien pour ce que je veux en faire, mais je pense qu’il y à moyen de faire « plus court, plus léger ».
Cette liste représente des liens qui vont ouvrir des pages des années futur qui seront prête à l’avance et ce depuis cette année jusqu’à 2042. Ces pages contiendront une revue de presse de chaque année. Le but est que la personne qui va s’en occuper ne doive pas s’occuper de mettre à jours les liens.
Si vous regardé le fichier démo :https://sumto.be/archives_presse/date_test.html vous pouvez constater que 2019, 2020, et 2021 son bien visible. Par contre 2022 ne l’est pas et c’est parfait, ce lien s’affichera dès 2023 et renverra vers la page des archives 2022. C’est ce qu’il me faut et pareil pour les années qui suivent et qui s’afficheront au fur et à mesure des années qui passes.
Cependant je trouvais que le script est un peu long et qu’il y avait certainement moyen de le rendre plus léger car le script actuel, en effet parle d’expiration que je n’ai pas besoin. Il fonctionne bien pour autant.
J’espère avoir été plus clair, désolé si ce n’est pas le cas, n’hésitez pas à me le dire, vous pouvez même me crier dessus si besoin 😊
Bien à vous
Vincent

PS: j'ai trouvé le script sur :https://jsfiddle.net/medel/qhgrtwzm/2/ dont j'ai juste retiré la date d'expiration puisque pas besoin et mis la class en fonction de ma liste.

[Toufik83]

Bonjour,

Ben le script que je vous ai écrit fait exactement ce que vous souhaitez faire, vous l'avez testé correctement ? quel est le résultat obtenu?

[NoSmoking]

ou bien mieux, utiliser un data-annee

vu le sujet, c'est sans aucun doute la solution la plus pérenne !

[Vincent668]

Bonjour NoSmoking, bonjour Toufik,
Quel serrait le danger de ne pas employer data-annee, en sachant qu'il n'y aura aucun autre nombre dans les classes li ?
Bien à vous
Vincent