Javascript 基于值自定义颜色（多次）

我有以下类型的html代码：

<div class="note">
<h4>
<span>3</span>
</h4>
</div>

<div class="note">
<h4>
<span>1</span>
</h4>
</div>

当我只有一个“note”类时，它工作得很好。然而，对于几个“note”类，它不起作用。解决这个问题的最好办法是什么

---

谢谢

您必须使用该类迭代所有项目：

jQuery(function () {
    // Score Color
    $('.note h4 span').each(function () {
        var score = parseInt($(this).text().trim());

        var color = 'red';
        if (!isNaN(score)) {
            if (score >= 3) {
                color = 'orange';
            }
            if (score >= 4) {
                color = 'green';
            }
        }
        //Just put this outside the if.
        //And use keyword this
        jQuery(this).css('color', color);
    });    
});

迭代对象上的所有项

$（'.note h4 span'）

返回与该选择器对应的项目列表。 如果我的解释有任何错误，请告诉我，我也是JQuery的新手。

1）下面的一行将返回“31”，我想这不是您所期望的：

var score = parseInt(jQuery('.note h4 span').text().trim());

 jQuery('.note h4 span').css('color', color);

2） 以下行将影响所有DOM元素，这些元素在“h4”中是“span”的，带有类“note”，我想这不是您所期望的：

var score = parseInt(jQuery('.note h4 span').text().trim());

 jQuery('.note h4 span').css('color', color);

为了使用jquery“each”循环更改每个元素的颜色，您必须使用所有跨度元素迭代一个项目

检查以下JSFIDLE：

---

您的代码仅适用于Notes类的第一个实例，因为变量只能存储一个内容。您应该迭代所有

jQuery（'.note h4 span'）

，或者获取一个包含所有这些内容的数组并对其进行迭代。太棒了，效果非常好！你不如我是新手；-）非常感谢。嘿，没问题，如果它有用并且有效，请确保将其标记为已回答：）事实上，我很快就和。。。我试过你的代码，每个值都变成红色…刚刚更新，现在应该可以工作了。JSFiddle：