Question

我正在尝试迭代多个DIVS，从所述DIV中提取一个数字值，如果该值==到JS中的特定值，则将特定的CSS类应用于返回的DIV。 / p>

这是我到目前为止的代码

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

DRY-并强制转换为数字：

os.urandom(16)

我本以为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? })应该不在循环内，因为如果全部5个都设置，那么现在您将在一个div上获得5个类

对于IE，您需要

getRating.classList.add('rating-'+val);

Answer 2

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

更改

getRatingValues += getRating[i].textContent;

到

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

此外，您的getRatingValues不应初始化为[]，而应初始化为

let getRatingValues = 0;

Answer 3

尝试parseInt

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

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 4

就像我的评论一样，您可以非常轻松地优化代码：

优化代码：

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

尝试将数值转换为CSS

4 个答案: