当变量超过某一值时改变背景
Changing background when variable exceeds a certain value
我要做的是给div另一个类,当我用来确定该元素的宽度的变量超过一定的值。当值超过70时,如何向适当的元素添加类?如您所见,属于该变量的元素与ID具有相同的名称。
这是我的代码:
//serverload bars
var serverload1 = 73;
var serverload2 = 13;
var serverload3 = 68;
var serverload4 = 33;
var serverload5 = 83;
var serverload6 = 63;
var serverload7 = 93;
var serverload8 = 23;
$('#serverload1').width(serverload1+"%");
$('#serverload2').width(serverload2+"%");
$('#serverload3').width(serverload3+"%");
$('#serverload4').width(serverload4+"%");
$('#serverload5').width(serverload5+"%");
$('#serverload6').width(serverload6+"%");
$('#serverload7').width(serverload7+"%");
$('#serverload8').width(serverload8+"%");
var barcolors = [serverload1, serverload2, serverload3, serverload4, serverload5, serverload6, serverload7, serverload8].forEach(testwidth);
function testwidth(element, index, array) {
if (element > 70) {
console.log(element);
}
}
我建议您按照以下方式重构代码:
var barcolors = [73, 13, 68, 33, 83, 63, 93, 23];
$("[id^=serverload]").filter(function() {
var i = this.id.substring(10),
width = barcolors[i-1];
if (width !== undefined)
this.style.width = width + "%";
return width > 70;
}).addClass("someClass");
演示:http://jsfiddle.net/JaqGJ/
试试这个…
function testwidth(element, index, array) {
if (element > 70) {
$('#' + element).addClass('mynewclass');
}
}
根据你们的综合回答,我得出了以下解决方案:
var barcolors = [["serverload1",serverload1], ["serverload2",serverload2], ["serverload3",serverload3], ["serverload4",serverload4], ["serverload5",serverload5], ["serverload6",serverload6], ["serverload7",serverload7], ["serverload8",serverload8]].forEach(testwidth);
function testwidth(element, index, array) {
if (element[1] > 70) {
console.log(element[0]);
var tegroot = "#"+element[0];
console.log(tegroot);
$(tegroot).addClass("redbar");
}
}
基于VisioN的解决方案,但更通用:
http://jsfiddle.net/JaqGJ/1/var barcolors = [73, 13, 68, 33, 83, 63, 93, 23];
$(".bar").filter(function(i) {
var width = barcolors[i];
this.style.width = width ? width + "%" : 0;
return width > 70;
}).addClass("someClass");
注意:最后一个栏号9只是为了测试代码的安全性
jQuery
.addClass()
,用于添加类。
试试这个,
if(serverload1>70){
$('#serverload1').addClass('NEW CLASS NAME');
}
与其说是回答,不如说是评论,但是:
是否考虑过将加载值放在html元素的数据属性中?
<div id="serverload1" class="serverload" data-load="73"></div>
<div id="serverload2" class="serverload" data-load="13"></div>
的js会更小,更可读:
$('div.serverload').filter(function() {
var $this = $(this),
load = $this.data('load');
$this.width(load + '%');
return load > 70;
}).addClass('customClass');
http://jsfiddle.net/5cXwb/9/相关文章:
- 如何用jquery动画改变背景颜色,就像一个过渡
- 具体化:模态改变背景并导致页面向右跳转
- HTML中的JavaScript正在改变背景
- jQuery改变背景颜色不工作
- 当改变背景颜色的html选择,第一个选项改变它
- 如何让TinyMCE的用户改变背景
- 高图-改变背景颜色沿特定的日期范围
- JavaScript:在点击时改变背景颜色(切换类)
- 每秒钟在红色和绿色之间改变背景颜色
- Jquery改变背景颜色悬停,不断闪烁
- 改变背景颜色不透明度与时间间隔
- 如何使用javascript改变背景图像的透明度
- Javascript根据用户所在的区域改变背景图像
- Jquery改变背景大小和图像src
- 逐渐改变背景颜色
- 获取JavaScript oninput函数来改变背景颜色
- 使用Javascript和RGBA改变背景颜色渐变
- 单选按钮不改变背景颜色HTML/CSS
- 如何改变背景图像与褪色
- 当项目被点击改变背景颜色- CSS(没有jQuery)