Javascript 根据数据属性更改多个项目的颜色

因此，有三个属性为

数据填充

的项，每个项都有一个span，其类为

.number

。如果值小于20，则项目应为黑色，否则为红色。有什么想法吗？我怎样才能让他们进入某种循环，这样它就可以分别针对每个项目

if（$（“.item”）.attr（'data-fill'）<20）{
$（“.number”）.css（“颜色”、“黑色”）；
}

.number{
颜色：红色；
}

20
40
30

您需要对元素进行迭代，并使用

number

类设置相应元素的样式

$（“.item”）。每个（函数（）{
如果（$（this）.attr（'data-fill'）<20）{
$（this.find（“.number”）.css（“颜色”、“黑色”）；
}
});
.number{
颜色：红色；
}

20
40
30
为此，您需要记住以下几点：

有多个
.item
元素，因此您需要在每个元素上循环，并使用class
number
检查
span
的值
您需要找到相应
.item
元素的
.number
元素，以便仅更改该
.number
元素的
颜色

由于它是
数据
属性，因此可以使用
.data（）
而不是
.attr（）
：

var elem=$（“.item”）；
$（元素）。每个（函数（）{
如果（$（this）.data（'fill'）<20）{
$（this.find（“.number”）.css（“颜色”、“黑色”）；
}
});
.number{
颜色：红色；
}

19
40
30
12
您可以使用过滤器（）执行此操作：


$（'.item'）.filter（函数（）{
返回$（this）.data（'fill'）<20；
}).find（'.number'）.css（'color'，'black'）
.number{
颜色：红色；
}

20
40
30
或者，不使用JavaScript，也可以通过CSS实现这一点


.number{
颜色：红色；
}
.项目[数据填充^=“1”]：不是（[data fill=“100”]）。编号，
.项目[数据填充=“2”].编号，
.项目[数据填写=“3”].编号，
.项目[数据填充=“4”].编号，
.项目[数据填写=“5”].编号，
.项目[数据填写=“6”].编号，
.项目[数据填写=“7”].编号，
.项目[数据填写=“8”].编号，
.项目[数据填充=“9”].编号{
颜色：黑色；
}

19
40
30
感谢大家的精彩回答我在@Nikhil上做了这些回答，因为这是第一次，你的回答当然也一样好！：）