Probleme avec document.getElementsByClassName

flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023 - 10 oct. 2022 à 11:45
flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023 - 10 oct. 2022 à 17:48

Bonjour a tous

je continue a découvrir JavaScript et de nouveau je suis confronte a un petit soucis

Dans mon bon de commande j'ai +- 300 articles et chaque article est enveloppé par une div  

dans lequel il y a une class couleur1

je souhaiterais que lorsque  la quantité est plus grande que 0 dans l'intérieur de ma div que ma div devienne verte

cela fonctionne super nickel avec une div 

Mais si je remet la même classe pour mon deuxième article et que la quantité de mon article est plus grand que 0

Ma div ne passe pas verte sauf si j'ajoute par exemple la classe couleur3

Pour mieux comprendre

voici l'extrait de mon code ou je récupère la quantité de l'article et ou je teste cette quantité , afin de lui donner la couleur verte si quantité pus grand que 0

$('.ajouter-panier').click(function(event) {
	event.preventDefault();
	var nom_option = "";
	var prix_option = 0;
	var url = $(this).data('url');
	var option_checkbox = $(this).data('checkbox');
	if (option_checkbox != "") {
		var checkboxes = document.getElementsByClassName(option_checkbox);
		for (var i = 0; i < checkboxes.length; i++) {
			if (checkboxes[i].checked == true) {
				var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') + ")";
				var prix_option = prix_option + Number($(checkboxes[i]).data('prix'));
			}
		}
	}
	if ($(this).data('select')) {
		var nom = $(this).data('nom') + " (" + document.getElementById("" + $(this).data('select') + "").value + ")" + nom_option;
	} else var nom = $(this).data('nom');
	var prix = Number($(this).data('prix')) + (prix_option);
	if ($(this).attr('data-qte')) {
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option, url);
	} else MonPanier.ajouter_produit_dans_panier(nom, prix, 1, url);
	var color = $(this).attr('data-qte');
	console.log(color);
	if (color > 0) {
		const collection1 = document.getElementsByClassName("couleur1");
		collection1[0].style.backgroundColor = "#9bdf49";
		const collection2 = document.getElementsByClassName("couleur2");
		collection2[0].style.backgroundColor = "#9bdf49";

	} else {
		const collection1 = document.getElementsByClassName("couleur1");
		collection1[0].style.backgroundColor = "";
		const collection2 = document.getElementsByClassName("couleur2");
		collection2[0].style.backgroundColor = "";


	}
	afficherpanier();
});

et la partie html d'une des div

<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 couleur1" style="margin-bottom: 15px; padding-left: 5px; padding-right: 5px;">
  <div class="card">
    <div class="">
      <h3 class="card-title centrer_titre_texte couleur2">2001</h3>
      <div class="card-body stylecardbody" style="padding-top: 0;">
        <div class="row mt-12">             
          <div class="col-md-12">
            <select class="form-select styleselect" aria-label="2001" onchange="changeQte(this);">
              <option selected value="1.10">1 sachet </option>
              <option value="2">2 sachets</option>
              <option value="3">3 sachets </option>    
            </select>
          </div>
          <a style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;" data-nom="2001" data-prix="1.10" data-qte="1" data-checkbox="2001" data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG" class="btn btn-primary ajouter-panier b-items__item__add-to-cart" onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000);"> ajouter au panier </a>      
        </div>       
      </div>
    </div>
  </div>
</div>

Ma question est donc de savoir comment faire pour que cela fonctionne avec chaque article sans devoir mettre une classe différente pour chaque produit

2 réponses

jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462
10 oct. 2022 à 14:04

Bonjour,

Le problème, c'est que tu cibles systématiquement le premier élément de ta class

collection1[0]

A la place, il faut cibler en relatif  l'élément par rapport au bouton cliqué.

Pour ça, tu peux utiliser le  $(this) qui fait référence au bouton 

puis utilisé les méthodes  .parent() pour remonter dans l'arborescence  et enfin .find('.color1') pour cibler l'élément qui contient cette class.

Il existe d'autres selecteurs avec lesquels tu peux aussi essayer de jouer ( tu trouveras la liste en regardant les selecteurs css )


.
Cordialement,
Jordane

0
flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023 173
10 oct. 2022 à 14:21

bonjour Jordane 

Merci de l'aide

aie aie me revoilà parti dans l'inconnu ...

comme toujours je prends des exemples sur w3schools.com

le $(this) qui fait référence au bouton est  

$('.ajouter-panier')

puis d'apes ce que je peux comprendre 

faire ceci

$("couleur1").parent().css({"color": "red"});
0
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462 > flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023
10 oct. 2022 à 14:53
0
flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023 173 > jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023
10 oct. 2022 à 16:08

Merci jordane 

je viens de faire un test car je ne connais pas tres bien this

donc en javascript j'écris ceci

  function reply_click(clicked_id)
  {
      console.log(clicked_id);
  }

et dans le boutton ceci

	<a
						style="cursor: pointer; margin-bottom: 5px;width: 90%;display: block;margin-left: auto;margin-right: auto;"
						data-nom="2001"
						data-prix="1.10"
						data-qte="1"
						data-checkbox="2001"
						id="33333"
						data-url="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2001.JPG"
						class="btn btn-primary ajouter-panier b-items__item__add-to-cart"
						onclick="setTimeout(() => ouvreMaJolieAlert(event), 1000); reply_click(this.id);"
					>
						ajouter au panier
					</a>

mais cela ne me retourne rien ....

0
jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023 4 462 > flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023
10 oct. 2022 à 16:22

quel est le rapport entre le code que tu nous as montré au début ....  et ce bout de code là ??

De plus, ne confond pas le this  du "pure" javascript .. et le $(this) de jquery.

A noter que les fonctions parent() et find() que je t'ai indiqué sont en JQUERY !

0
flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023 173 > jordane45 Messages postés 36849 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 26 janvier 2023
10 oct. 2022 à 16:29

j'essaye de comprendre comment cela fonctionne tout simplement ...

je venais de trouver un exemple avec un id d'ou mon essai (qui fonctionne a présent) 

a présent que j'ai compris je pense le this 

je suppose que $(this) est sur le même principe 

Je ne comprends pas trop quelle valeur je dois lui faire passer ?

0
flexi2202 Messages postés 3745 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 23 janvier 2023 173
10 oct. 2022 à 17:48

voila la solution 

  const collection1 = event.currentTarget.parentElement.parentElement.parentElement.parentElement.parentElement
       const h1  = event.currentTarget.parentElement.parentElement.previousElementSibling
     

      if (color > 0) {
        collection1.style.backgroundColor = "green";
        h1.style.color = "green";
      } else {
        collection1.style.backgroundColor = "";
        h1.style.color = "";
      }
0