J'essaie d'itérer sur un certain nombre de DIVS, d'extraire une valeur numérique desdits DIVs, si cette valeur est == à une valeur spécifique dans le JS, d'appliquer une classe CSS spécifique à la DIV dont elle est issue.

Voici le code que j'ai jusqu'à présent

const getRating = document.getElementsByClassName('my-ratings');
let getRatingValues = [];
for(var i = 0; i < getRating.length; i++) {
    getRatingValues += getRating[i].textContent;

    if (getRatingValues == 5) {
        getRating.classList.add('rating-5');
    }
    if (getRatingValues == 4) {
        getRating.classList.add('rating-4');
    }
    if (getRatingValues == 3) {
        getRating.classList.add('rating-3');
    }
    if (getRatingValues == 2) {
        getRating.classList.add('rating-2');
    }
    if (getRatingValues == 1) {
        getRating.classList.add('rating-1');
    }
}

J'ai l'impression d'être proche, mais je ne peux tout simplement pas casser le dos ...

Pour le moment, le script semble remplir les getRatingValues sous forme de chaîne, donc si j'ai des valeurs de 5, 3, 1, 2, 2, 4, les getRatingValues seront 531224. Quelqu'un pourrait-il m'orienter dans la bonne direction s'il vous plaît?

1
Takuhii 19 nov. 2018 à 19:01

4 réponses

Meilleure réponse

SEC - et moulé au numéro:

let getRatingValues = 0;
document.querySelectorAll('.my-ratings').forEach(function(rate) { // for each my rating
  let val = rate.textContent; // get the rate
  getRatingValues += isNaN(val)?0:+val; // convert to number if is IS a number and add
  rate.classList.add('rating-'+val); // add the class - here or outside the loop?
})

J'aurais pensé que getRating.classList.add('rating-'+val); devrait être en dehors de la boucle puisque maintenant vous obtiendrez 5 classes sur une div si les 5 sont définies

Pour IE, vous avez besoin

var ratings = document.querySelectorAll('my-ratings');
for (var i=0;i<ratings.length;i++) {
  let val = ratings[i].innerText, rate = ratings[i];
3
mplungjan 20 nov. 2018 à 05:56

Vous devez convertir la chaîne en Number.

Changement

getRatingValues += getRating[i].textContent;

À

getRatingValues += Number(getRating[i].textContent);

De plus, votre getRatingValues ne doit pas être initialisé à [], mais plutôt être

let getRatingValues = 0;
1
Dinesh Pandiyan 19 nov. 2018 à 16:04

Essayez parseInt

getRatingValues += parseInt(getRating[i].textContent);

Référence: https://developer.mozilla.org/ en-US / docs / Web / JavaScript / Reference / Global_Objects / parseInt

0
mplungjan 19 nov. 2018 à 16:15

Comme mon commentaire, vous pouvez optimiser votre code très facilement:

Ce code optimisé:

const getRating = document.getElementsByClassName('my-ratings');
for(var i = 0; i < getRating.length; i++) {
    getRatingValues += Number(getRating[i].textContent);   
    if (getRatingValues !== undefined) {
        getRating.classList.add('rating-' + i);
    }
}
0
episch 19 nov. 2018 à 16:07