试图将数值转换为css

Question

我试图迭代许多DIV，从所述DIV中提取一个数值，如果该值是==到JS中的特定值，则将特定的CSS类应用到它来自的DIV。

这是我到目前为止掌握的代码

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');
    }
}

我觉得我离得很近，但就是不能打破它的后背.

目前，脚本似乎将getRatingValues填充为字符串，因此如果我的值为5、3、1、2、2、4，那么getRatingValues将为531224。有人能给我指点方向吗？

Answer 1

干法-按数字铸造：

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?
})

我本以为getRating.classList.add('rating-'+val);应该在循环之外，因为现在如果所有5都设置好了，那么在一个div上就可以得到5个类。

对于IE你需要

var ratings = document.querySelectorAll('my-ratings');
for (var i=0;i<ratings.length;i++) {
  let val = ratings[i].innerText, rate = ratings[i];

Answer 2

您需要将字符串转换为Number。

变化

getRatingValues += getRating[i].textContent;

至

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

而且，您的getRatingValues不应该初始化为[]，而应该是

let getRatingValues = 0;

Answer 3

试试parseInt

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

参考资料：Objects/parseInt