如何根据<td>值更改元素的颜色

Question

我目前正试图根据值是正值还是负值来更改表中元素的颜色，目前这就是我所拥有的，但它不能正常工作，并且是n^2，我觉得这有点低效：

export const ActiveStockList = () => {
const store = useStockListStore();
var x = document.getElementsByClassName("ColorTest");
for (var i = 0; i < x.length; i++) {
for (var j = 0; j < x[i].length; j++) {
if (x[i].charAt(j) != "-") {
x[i].style.Color = "green";
} else {
x[i].style.Color = "red";
}
}
}
return useObserver(() =>
store.stocks.map((stock) => (
<tr>
<td className="justify-content-center">
<a href={"/stocks/" + stock.symbol}>{stock.symbol}</a>
</td>
<td>{+stock.latestVolume}</td>
<td className="ColorTest">
{(+stock.changePercent * 100).toFixed(2)}%
</td>
<td className="ColorTest">$ {+stock.change}</td>
<td>$ {+stock.latestPrice}</td>
<td className="ColorTest">{(+stock.ytdChange * 100).toFixed(2)}%</td>
<td>Buy</td>
<td>10,023,000</td>
<td>89.23</td>
<td>140,000</td>
</tr>
))
);
};

根据三个元素的值是大于0还是小于0，将它们更改为绿色或红色的最佳方法是什么？非常感谢。

Answer 1

我的建议。将其写成内联样式。无需像使用React那样修改dom。使用实际数字和逻辑检查：

style={stockNumber <= 0 ? {color: "red"} : {color: "green"}}

或者任何逻辑。如果您不想反复重复逻辑，请将其转换为返回样式对象的函数。

Answer 2

通过迭代匹配元素来设置颜色实际上没有意义。

您只需将style属性设置到位即可。

例如，代替

<td className="ColorTest">$ {+stock.change}</td>

你可以：

<td style={{ color: stock.change < 0 ? "red" : "green"}}>$ {+stock.change}</td>