Animation plusieurs éléments avec la même class

Krokilex
Javascript

Bonsoir,
je réalise un petit menu animé à l'aide de js.
Comme je travaille avec des bases de données je possède plusieurs div identiques qui utilisent ce menu.
Je recupère donc tout mes éléments avec le getElementsByClassName.
Puis j'utilise une boucle pour appliquer un comportement identique à chaque élément de la div.
Voici ce que j'ai pour l'instant: 

arrow = document.getElementsByClassName('arrow');
  btn = document.getElementsByClassName('btnG');
  btnLeave = document.getElementsByClassName('fBtn');
  btnPicture = document.getElementsByClassName('sBtn');
  $.each(arrow, function (index, value) {
    arr = arrow[index]
    bt = btn[index]
    btL = btnLeave[index]
    btP = btnPicture[index]
    arr.addEventListener('click', function(){

    if (arr.classList.contains('participateArrowDown')) {
      arr.classList.remove('participateArrowDown')
      arr.classList.add('participateArrowTop')

      bt.classList.remove('homeParticipateBtnH')
      bt.classList.add('homeParticipateBtnS')

      btL.classList.remove('btnContainerLeaveH')
      btL.classList.add('btnContainerLeaveS')

      btP.classList.remove('btnContainerPictureH')
      btP.classList.add('btnContainerPictureS')
    }
    else {
      arr.classList.remove('participateArrowTop')
      arr.classList.add('participateArrowDown')

      bt.classList.remove('homeParticipateBtnS')
      bt.classList.add('homeParticipateBtnH')

      btL.classList.remove('BtnContainerLeaveS')
      btL.classList.add('BtnContainerLeaveH')

      btP.classList.remove('btnContainerPictureS')
      btP.classList.add('btnContainerPictureH')
    }
  })
})

Il se trouve que le système fonctionne mais pas totalement. En effet, le comportement demandé, c'est à dire de changer les class en appuyant sur une flèche fonctionne mais seulement pour les derniers éléments recuperer et pas les précédents.
En quelque sorte, el comportement est appliqué uniquement pour les dernières valeurs que prendront mes différentes variables : arr, bt, btL et btP.
J'ai tenté de changer de méthode de boucle mais en vaine, je bloque totalement.

Je vous remercie pour vos réponses.

PS: il y a du jquery et js "classique" mélangé car j'utilisais le js classique de base mais j'ai tenté d'utiliser jquery pour résoudre mon probème.

8 réponses

Krokilex
Auteur
Réponse acceptée

Bonour,

Tout d'abord merci de vos réponses et d'avoir pris le temps d'essayer de m'aider. Cependant, je me rend compte que mon problème est très particulier et pas très évident à saisir. Me débrouillant mieux en php, j'ai résolue pu résoudre mon problème, en faisant un script un peu à l'arrache mélangeant php et js, voilà ce que cela donne: 

arrow<?= $pp["id"]?> = document.getElementById('arrow<?= $pp["id"]?>');
          btn<?= $pp["id"]?> = document.getElementById('btnG<?= $pp["id"]?>');
          btnLeave<?= $pp["id"]?> = document.getElementById('fBtn<?= $pp["id"]?>');
          btnPicture<?= $pp["id"]?> = document.getElementById('sBtn<?= $pp["id"]?>');
            arrow<?= $pp["id"]?>.addEventListener('click', function(){
            if (arrow<?= $pp["id"]?>.classList.contains('participateArrowDown')) {
              arrow<?= $pp["id"]?>.classList.remove('participateArrowDown')
              arrow<?= $pp["id"]?>.classList.add('participateArrowTop')

              btn<?= $pp["id"]?>.classList.remove('homeParticipateBtnH')
              btn<?= $pp["id"]?>.classList.add('homeParticipateBtnS')

              btnLeave<?= $pp["id"]?>.classList.remove('btnContainerLeaveH')
              btnLeave<?= $pp["id"]?>.classList.add('btnContainerLeaveS')

              btnPicture<?= $pp["id"]?>.classList.remove('btnContainerPictureH')
              btnPicture<?= $pp["id"]?>.classList.add('btnContainerPictureS')
            }
            else {
              arrow<?= $pp["id"]?>.classList.remove('participateArrowTop')
              arrow<?= $pp["id"]?>.classList.add('participateArrowDown')

              btn<?= $pp["id"]?>.classList.remove('homeParticipateBtnS')
              btn<?= $pp["id"]?>.classList.add('homeParticipateBtnH')

              btnLeave<?= $pp["id"]?>.classList.remove('btnContainerLeaveS')
              btnLeave<?= $pp["id"]?>.classList.add('btnContainerLeaveH')

              btnPicture<?= $pp["id"]?>.classList.remove('btnContainerPictureS')
              btnPicture<?= $pp["id"]?>.classList.add('btnContainerPictureH')
            }
          })
Ekim Kael

Salut,
faudrait qu'on aie le fichier html pour pouvoir peut-être tester et véritablement t'aider

Krokilex
Auteur

Voici le code html associé au js : 

<div class="participateHeader">
          <img src="assets/img/projectSquare.png" class="homeParticipateImg" alt="">
          <h2 style="display:inline-block;transform:translateY(25%);margin-left:20px;"><?=$pp['name']?></h2>
          <div class="participateArrow"><i class="fa fa-arrow-down participateArrowDown arrow" aria-hidden="true"></i></div>
  </div>
  <div class="participateBtnH btnG">
       <div class="btnContainer btnContainerLeaveH fBtn">
            <div class="btnLeave"><i class="fa fa-times" aria-hidden="true"></i></div>
            <div class="btnTitle"><h3>Supprimé l'album</h3></div>
        </div>
        <div class="btnContainer btnContainerPictureH sBtn">
            <div class="btnPicture"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
            <div class="btnTitle"><h3>Ajouter une photo</h3></div>
         </div>
   </div>

(Oui, les noms de class ne sont pas trés clair j'en suis conscient)

Pour préciser, la div avec la class ParticipateHeader ne bouge pas, c'est celle avec participateHeaderBtn qui est caché derrière la première et en cliquant sur un icône de flèche elle sort en-dessous

lGatl

Ahaaaaaaaaa portée des variables quand tu nous prends

Ekim Kael
  1. bon déjà faut choisir.Soit c'est jquery soit c'est JS pure.
  2. Si c'est JS utilise le document.querySelectorAll('.class'); pour selectionner les class plus facilement.
    Ensuite tu peux utiliser var.classList.toogle('class'); au lieu de faire un add et remove à chaque fois.
    je sais pas vraiment ce que tu veux faire.Donc pour le moment je ne peux t'aider car c'est encore flou.
    soit tu renvois le tout (HTML,CSS,JS) soit tu mets l'image pour qu'on voit à quoi ça ressemble
lGatl

Plus simple et sans php essaie le quand meme ;) 

arrow = document.getElementsByClassName('arrow');
  btn = document.getElementsByClassName('btnG');
  btnLeave = document.getElementsByClassName('fBtn');
  btnPicture = document.getElementsByClassName('sBtn');

  $.each(arrow, function (index, value) {
var  arr = arrow[index]
  var  bt = btn[index]
   var btL = btnLeave[index]
   var btP = btnPicture[index]
    arr.addEventListener('click', function(){
    if (arr.classList.contains('participateArrowDown')) {
      arr.classList.remove('participateArrowDown')
      arr.classList.add('participateArrowTop')

      bt.classList.remove('homeParticipateBtnH')
      bt.classList.add('homeParticipateBtnS')

      btL.classList.remove('btnContainerLeaveH')
      btL.classList.add('btnContainerLeaveS')

      btP.classList.remove('btnContainerPictureH')
      btP.classList.add('btnContainerPictureS')
    }
    else {
      arr.classList.remove('participateArrowTop')
      arr.classList.add('participateArrowDown')

      bt.classList.remove('homeParticipateBtnS')
      bt.classList.add('homeParticipateBtnH')

      btL.classList.remove('BtnContainerLeaveS')
      btL.classList.add('BtnContainerLeaveH')

      btP.classList.remove('btnContainerPictureS')
      btP.classList.add('btnContainerPictureH')
    }
  })
})

un petit var devant les variables ca change tous
:)

lGatl

En fait vu que tu n'avais pas mis le var, les variables etaient déclarées en dehors de ta fonction du coup, quand tu la rappelais au deuxieme tour de boucle, tu modifiais les variables du premier tour ... etc .. .. avec le var, a chaque tour les variables sont differentes et ne se remplacent pas

lGatl

@Krokilex si tu veux tester chez moi ca fonctionne