Partage
  • Partager sur Facebook
  • Partager sur Twitter

Classe dynamique dans un querySelector.

    27 janvier 2023 à 12:16:14

    Bonjour,

    J'écris ici car malgré mes recherches j'ai l'impression de tourner en rond.

    J'aimerais savoir si il est possible d'avoir une valeur variable dans le sélecteur ?

    Je m'explique :

    Je souhaite chercher dans mon code html des classes qui commencent toutes par itemQuantity et qui finissent par un chiffre ou nombre

    <input type="number" class="itemQuantity${[i++]}">

    (cette partie de code est extraite d'une boucle)
    Et je souhaiterai que mon querySelector puisse adapter son select en fonction de la valeur de i :

    document.querySelector('.itemQuantity0').addEventListener('change', (event) => {

    (0 est un exemple de chiffre qui pourrait évoluer en fonction de i)

    Je suis ouvert à toute aide et alternatives et vous remercie d'avance pour l'intérêt que vous porterez à ma question.

    • Partager sur Facebook
    • Partager sur Twitter
      27 janvier 2023 à 13:38:42

      Bonjour, si tu as besoin de sélectionner tous tes input du type itemQuantity le plus simple serait de leurs ajouter une 2iem classe qui sera la même pour tous (ce qui te permettras ensuite de faire une sélectionner grouper en Javascript où bien même en CSS).

      <input type="number" class="itemQuantity itemQuantity${[i++]}">

      ci-dessus "itemQuantity" qui est la classe groupé et "itemQuantity${[i++]}" qui est la classe individuelle.

      Ce qui peut en Javascript te permettre de tous les sélectionner de cette façon:

      const inputItemQUantity = document.querySelectorAll('.itemQuantity')
      

      Puis il faudra faire une boucle par parcourir tous les inputs et ajouter les événements que tu veux dessus:

      for(const input of inputItemQUantityList) {
      
      	input.addEventListener("change", (event) => {
          	// do something ...
              // ...
          })
      }


      Si tu connais à l'avance combien il y a d'input dans le document tu peux aussi sélectionner les input avec une boucle et utiliser l'index comme variable dans la sélection:

      const NOMBRE_INPUT = 10;
      
      
      for(let i = 0; i < NOMBRE_INPUT; i++) {
      	
          const input = document.querySelector(`.itemQuantity${i}`)
          
          input.addEventListener("change", (event) => {
          	
              // do something ...
              // ...
          })
      }
      

      Ce qui devrait fonctionner aussi pour peux que le nombre d'inputs soit pas variable et connu à l'avance donc ça pose quelque contraintes quand même.

      La première solution parait plus adapter et surtout ressemble plus à un code "normal".


      • Partager sur Facebook
      • Partager sur Twitter

      suggestion de présentation.

      Classe dynamique dans un querySelector.

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
      • Editeur
      • Markdown