我要实现的是获取dom层的数值,判断当数值大于50时显示绿色,反之则为红色,具体实现代码如下:
在dom层:
<ul>
<li>
<div class="left-wrap">
<i class="icon2"></i>
<div class="desc">
<span>CPU:</span>
<span>8</span>
<span>核</span>
</div>
</div>
<div class="right-wrap">
<span>利用率:</span>
<div class="desc number">
<span class="num">80</span>
<em class="dw">%</em>
</div>
</div>
</li>
<li>
<div class="left-wrap">
<i class="icon3"></i>
<div class="desc">
<span>内存:</span>
<span>32</span>
</div>
</div>
<div class="right-wrap">
<span>利用率:</span>
<div class="desc number">
<span class="num">60</span>
<em class="dw">%</em>
</div>
</div>
</li>
<li>
<div class="left-wrap">
<i class="icon4"></i>
<div class="desc">
<span>硬盘:</span>
<span>500</span>
<span>G</span>
</div>
</div>
<div class="right-wrap">
<span>利用率:</span>
<div class="desc number">
<span class="num">50</span>
<em class="dw">%</em>
</div>
</div>
</li>
<li>
<div class="left-wrap">
<i class="icon5"></i>
<div class="desc">
<span>原因:</span>
<span>CPU利用率超标</span>
</div>
</div>
</li>
</ul>
实现方法:
$(document).ready(function () {
$(".num").each(function () {
var num = $(this).text()
if (num <= 50) {
$(this).css("color", "#fb6777");
$(this).siblings(".dw").css("color", "#fb6777");
}
else {
$(this).css("color", "#61ff00");
$(this).siblings(".dw").css("color", "#61ff00");
}
})
});
这样就能实现获取相应的数据,改变样式了,很简单,但有时候也会忘记,写下来便于自己温故知新。