Je suis nouveau sur javascript et je suis aux prises avec un problème pour lequel je ne trouve pas de solution. J'ai quelques divs avec la classe ''détails'' avec leurs enfants ''expander-bottom''. Je veux simuler une situation où chaque fois que je clique sur ''détails'' div ses enfants changent de hauteur de 0 à 550px. Je sais comment le faire pour un seul élément en utilisant l'identifiant de div, mais je ne veux pas dupliquer l'identifiant spécifique du paramètre de code pour chaque élément et lui attribuer une fonction. Je voudrais le faire en quelques lignes en utilisant le nom de la classe ;

Voici le code pour deux div :

<div class="details">
        Details  
        <div class="expander-bottom" style="height: 0px;" onclick="clickDiv()">                              
              <div class="text-prices">
                  <h1>Prices:</h1> <br>
                  Small: 5$<br>
                  Medium: 7$<br>
                  Large: 10$
              </div>         
        </div>           
</div> 

<div class="details">
            Details  
            <div class="expander-bottom" style="height: 0px;" onclick="clickDiv()">                              
                  <div class="text-prices">
                      <h1>Prices:</h1> <br>
                      Small: 6$<br>
                      Medium: 8$<br>
                      Large: 11$
                  </div>         
            </div>           
</div> 

Et mon code javascript pour un seul élément utilisant l'identifiant au lieu de la classe, comme vous pouvez le voir, j'ai également dû utiliser l'identifiant des enfants :

function clickDiv(){  
var a = document.getElementById("expander-bottom"); 
    if(a.style.height=="0px"){
        a.style.height = "550px";
    }
    else if(a.style.height>="0px"){
        a.style.height = "0px";
    }   
}   

Et donc cela fonctionne pour un élément et pour le faire fonctionner pour d'autres éléments, je devrai attribuer un identifiant spécifique pour le parent et les enfants et dupliquer la fonction autant de fois que le nombre d'éléments.

J'ai essayé d'utiliser eventListeners pour créer du code comme ci-dessous :

var parents = document.getElementsByClassName("details");
var childrens = document.getElementsByClassName("expander-bottom");
for(var i=0;i<parents.length;i++){
    parents[i].addEventListener('click', function(){
        if(childrens[i].style.height=="0px"){
            childrens[i].style.height = "550px";
        }
        else if(childrens[i].style.height>="0px"){
        childrens[i].style.height = "0px";
        }
    }, false);
}

Mais cela ne semble pas fonctionner. Est-il possible d'utiliser l'écouteur d'événements DOM dans ce cas pour le faire fonctionner ou toute autre meilleure solution?

0
Kotori Itsuka 7 mars 2019 à 17:40

2 réponses

Meilleure réponse

Pouvez-vous s'il vous plaît essayer l'exemple ci-dessous.

const detailsElements = document.querySelectorAll(".details");
for (let i = 0; i < detailsElements.length; i++) {
  detailsElements[i].addEventListener("click", function () {
    let child = this.querySelector('.expander-bottom');
    if (child.style.height == "0px") {
      child.style.height = "550px";
    }
    else if (child.style.height >= "0px") {
      child.style.height = "0px";
    }
  });
}
.details{
  height: 200px;
}
<div class="details">
        Details  
        <div class="expander-bottom" style="height: 0px;" >                              
              <div class="text-prices">
                  <h1>Prices:</h1> <br>
                  Small: 5$<br>
                  Medium: 7$<br>
                  Large: 10$
              </div>         
        </div>           
</div> 

<div class="details">
            Details  
            <div class="expander-bottom" style="height: 550px;">                              
                  <div class="text-prices">
                      <h1>Prices:</h1> <br>
                      Small: 6$<br>
                      Medium: 8$<br>
                      Large: 11$
                  </div>         
            </div>           
</div> 
0
Siddharth Pal 7 mars 2019 à 16:27

Essaye ça:

var parents = document.getElementsByClassName("details");
var childrens = document.getElementsByClassName("expander-bottom");
for(var i=0;i<parents.length;i++){
    (function(i){
        parents[i].addEventListener('click', function(){
            if(childrens[i].style.height=="0px"){
                childrens[i].style.height = "550px";
            }
            else if(childrens[i].style.height>="0px"){
            childrens[i].style.height = "0px";
            }
        }, false);
    })(i)
}

N'oubliez pas non plus de fermer votre classe div ici <div class="details>

0
Barbu Barbu 7 mars 2019 à 15:02