Bonjour à tous et à toutes,

Je travaille sur une page HTML qui a une liste d'événements (autrement dit un agenda).

Chaque événement dispose (entre autre) d'au moins un tag.

Derrière chaque tag, il y a un lien => quand on clique sur tel ou tel tag, on a/filtre tous les événements avec le même tag.

Je ne peux pas afficher plus de 30 événements dans mon agenda.

Problème : Le client (qui gère 3 médiathèques) a des événements récurrents (genre "l'heure du conte" tous les mercredis dans chaque médiathèque). Avec 3 médiathèques, ces événements/éléments récurrents peuvent donc vite occuper une (bonne) partie de l'agenda.

Par conséquent, on (le client et moi) voudrait masquer ces événements récurrents. On a pensé leur attribuer un tag pour les différencier des autres événements (qui, eux, sont plus ou moins ponctuels).

(Sachant que mes seules "armes" sont le CSS et jQuery/Javascript (pour une raison qui serait trop longue à expliquer)) On voudrait faire un script (en jQuery ou Javascript peu importe) avec la condition suivante :

"Si un événement a le tag A (par exemple "Adulte" qui a l'URL "https://nom_du_site.fr/node/tag/tid/23031" ), masque-moi l'événement en question en lui ajoutant la classe "hidden""

Voici le code HTML (édulcoré) de l'agenda :

<div class="content-rdv">    

    <div class="node-item node-event clearfix" id="event-260381">
        <div class="media">
            <div class="col-xs-12 col-md-2">
                <div class="media-left">
                    <div class="event-actions">
                        
                        <img src="https://nom_du_site.fr/data/nom_du_site.fr/application/node/260381/thumb.jpg" class="img-responsive bonne_vignette">
                    </div>
                    <a target="_blank" href="/mois-du-films-docs?tab=news#node-260381"></a>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="media-body">
                    <h4><a target="_blank" href="/mois-du-films-docs?tab=news#node-260381">Histoire d’un regard </a></h4>
                    <p>Le Lundi 22 Novembre 2021 de 17h00 à 18h35 </p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23031" style="background-color:#dabbe4 !important;color:#000000 !important;">Adulte </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23039">Projection </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28647" style="background-color:#12af27 !important;color:#ffffff !important;">Mois du film docs </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28932">À François Mitterrand - Auditorium </a>
                    </div>
                </div>
            </div>
            <div class="hidden-xs hidden-sm hidden-md hidden-lg">
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
                    <p>Histoire d’un regard de Mariana Otero (2020 ; 90 mn)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="node-item node-event clearfix" id="event-260388">
        <div class="media">
            <div class="col-xs-12 col-md-2">
                <div class="media-left">
                    <div class="event-actions">
                        <img src="https://nom_du_site.fr/data/nom_du_site.fr/application/node/260388/thumb.jpg" class="img-responsive bonne_vignette">
                    </div>
                    <a target="_blank" href="/mois-du-films-docs?tab=news#node-260388"></a>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="media-body">
                    <h4><a target="_blank" href="/mois-du-films-docs?tab=news#node-260388">Le Grand bal</a></h4>
                    <p>Le Mardi 23 Novembre 2021 de 17h00 à 18h30 </p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23031" style="background-color:#dabbe4 !important;color:#000000 !important;">Adulte</a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23039">Projection </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28647"style="background-color:#12af27 !important;color:#ffffff !important;">Mois du film docs </a>
                    </div>
                </div>
            </div>
            <div class="hidden-xs hidden-sm hidden-md hidden-lg">
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
                    <p>Le Grand bal de Laetitia Carton (2018 ; 86 min)</p>
                </div>
            </div>
        </div>
    </div>
    <div class="node-item node-event clearfix" id="event-260390">
        <div class="media">
            <div class="col-xs-12 col-md-2">
                <div class="media-left">
                    <div class="event-actions">
                        <img src="https://nom_du_site.fr/data/nom_du_site.fr/application/node/260390/thumb.jpg" class="img-responsive bonne_vignette">
                    </div>
                    <a target="_blank" href="/mois-du-films-docs?tab=news#node-260390"></a>
                </div>
            </div>
            <div class="col-xs-12 col-md-10">
                <div class="media-body">
                    <h4><a target="_blank" href="/mois-du-films-docs?tab=news#node-260390">Marche avec les loups</a>
                    </h4>
                    <p>Le Mercredi 24 Novembre 2021 de 17h00 à 18h30 </p>
                    <div class="node-item-tags">
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23031" style="background-color:#dabbe4 !important;color:#000000 !important;">Jeunesse</a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/23039">Projection </a>
                        <a class="badge" href="https://nom_du_site.fr/node/tag/tid/28647"style="background-color:#12af27 !important;color:#ffffff !important;">Mois du film docs </a>
                    </div>
                </div>
            </div>
            <div class="hidden-xs hidden-sm hidden-md hidden-lg">
                <div class="event-description">
                    <span class="event-description-close fas fa fa-times"></span>
                    <p><em>Marche avec les loups</em> de Jean-Michel Bertrand (2020 ; 88 mn)</p>
                </div>
            </div>
        </div>
    </div>

</div>

(Comme j'y connais pas grand-chose au jQuery/Javascript) Ma question est : comment SVP écrire ce script qui va :

1 - Rechercher si l'événement a un tag/lien avec la classe "badge" et (surtout) (par exemple) l'URL "https://nom_du_site.fr/node/tag/tid/23031"

2 - (si la condition est vraie) ajouter la classe "hidden" aux autres classes (class="node-item node-event clearfix") de l'événement en question ?

Merci par avance pour votre réponse et votre aide

Bonne journée

P.S : Précision importante : comme il s'agit d'une liste d'événements, cette liste est dynamique et les événements sont amenés à changer régulièrement.

-
Edité par spip93 26 octobre 2021 à 11:38:19

Bonjour.

Pas beaucoup de temps pour te rédiger du code, mais je te file quelques pistes de réflexion.

- tu peux, à partir de la classList ( element.classList ) faire plein de choses intéressantes :

element.classList - Référence Web API | MDN

- une première étape serait de construire des array d'éléments :

let eventElements = document.getElementsByClassName('content-rdv')[0].children;

// ou, plus simplement, si tu ajoutes à la div ayant pour class 'content-rdv' l'id 'content-rdv' :

let eventElements = document.getElementById('content-rdv').children;

Cet array contient les références à toutes tes divs ayant pour class 'node-item node-event clearfix'.
C'est un exemple, je ne sais pas précisément sur quels éléments tu veux agir.
Il existe plusieurs moyen, en javascript "pur" ou en JQuery ( avec lequel je suis moins familier ) pour obtenir ce array d'éléments.
Quoiqu'il en soit, un array est "itérable", tu peux parcourir cet array et effectuer une action sur chacun d'eux en fonction d'une condition :

let badgedElements = [];
let nonBadgedElements = [];

for(let element of eventElements){
   if(element.classList.contains('badge')){
      badgedElements.push(element)
   }
   else{
      nonBadgedElements.push('element')
   }
}

Ici nous avons deux arrays d'éléments, 'badgedElements' qui contient les éléments ayant 'badge' dans leur classList, et 'nonBadgedElements' qui contient les autres.
Il suffit alors d'itérer sur ces listes. Par exemple pour cacher les éléments ayant 'badge' dans leur classList :

for(let element of badgedElements){
   element.style.display = 'none';
}

Salut,

const hideFn = selector => { // Nouvelle fonction "hideFn" prennant 1 paramètre "selector".
    const nodeItems = document.querySelectorAll('.node-item'); // On récupère tout les éléments portant la class ".node-item"
    NodeItems.forEach(nodeItem => // Pour chaque nodeItem :
        if(nodeItem.querySelector(selectors)) // On vérifie qu'il existe 1 enfant correspondant au selector contenu dans notre paramètre "selector"
            nodeItem.classList.remove('hidden'); // Si oui, on retire toute class "hidden" qui pourrait être présente sur l'élément nodeItem.
        else // sinon :
            nodeItem.classList.add('hidden'); // On fait l'opération inverse : on ajoute la class "hidden" sur le l'élément nodeItem.
    });
};
// On utilise la fonction comme ça :
hideFn('a.badge[href="https://nom_du_site.fr/node/tag/tid/23031"]');

/** Elle peux être ajouter à un lien de cette façon :
  * <a href="javascript:hideFn('a.badge[href="https://nom_du_site.fr/node/tag/tid/23031"]');">Test</a>
  */

Bonjour,

Merci à vous pour vos réponses

Cependant (je n'ai peut-être pas été clair désolé) :

- Lucas, je voudrais masquer les événements qui ont un/des badge(s)/tag(s) particulier(s) (ici c'est le tag/badge "Adulte") et pas masquer les événements qui ont un badge/tag (tout court)

- BrainError, je ne veux pas masquer les badges/tags des événements qui en ont

Ce que je cherche à faire, c'est agir sur l(es)'événement(s) (pas sur les tags/badges), notamment masquer l(es)'événement(s) qui a(ont) un/des badge(s)/tag(s) bien spécifique(s). Par exemple, masquer/ajouter la classe "hidden" aux événements qui ont le badge/tag "Adulte" sachant que l'url du badge/tag "Adulte" a pour URL : https://nom_du_site.fr/node/tag/tid/23031

C'est comme appliquer un filtre sur un tag spécifique (ici "Adulte")

Dans mon exemple (dans le code HTML de l'agenda que j'ai donné), ça aurait pour résultat d'ajouter la classe "hidden" aux 2 premiers événements (sur les 3)

Dites-moi si ça n'est pas clair

-
Edité par spip93 26 octobre 2021 à 15:14:16

Ben, le morceau de code que je t'ai donnée fait exactement ce dont tu me parle.

Il masque les éléments portant des id #event-xxx avec une class .hidden s'ils possède un enfant a.bagde[href="xxx"].

C'est pas ça que tu cherches à obtenir ? Dans ce cas je confirme que je ne comprends pas ton problème...
Exprime toi vis-a-vis de ton code (class / id / attributs) plutôt qu'avec ce que tu estime être dans ton esprit tel ou tel partie de la structure de ton app : beaucoup plus compréhensible.

-
Edité par BrainError 26 octobre 2021 à 16:30:48

Excuse-moi BrainError, j'avais pas bien compris ton code

Quand j'ai vu :

hideFn('a.badge[href="https://nom_du_site.fr/node/tag/tid/23031"]');

j'ai cru (à tort visiblement) que ça masquait (uniquement) le badge/tag avec l'URL

https://nom_du_site.fr/node/tag/tid/23031

et non l(es)'événement(s) qui a(ont) le badge/tag "Adulte" qui ont l'URL

https://nom_du_site.fr/node/tag/tid/23031

Bref, j'ai mal compris, désolé

Sinon, sur un autre forum, on m'a donné le code suivant qui fonctionne aussi très bien :

document.querySelectorAll(".badge[href]")
  .forEach((a) => {
    if (a.textContent.indexOf('Adulte') >= 0) {
      a.closest('.node-item').classList.add('hidden');
    }
  });

En tout cas, merci beaucoup !!

Bonne journée