Javascript 当变量超过某个值时更改背景

我要做的是，当我用来确定元素宽度的变量超过某个值时，给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);
           }
       }

jQuery

.addClass用于添加类

试试这个

if(serverload1>70){
   $('#serverload1').addClass('NEW CLASS NAME');
}

试试这个

   function testwidth(element, index, array) {
       if (element > 70) {
         $('#' + element).addClass('mynewclass');
       }
   }

---

我建议您按照以下方式重新构造代码：

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");

---

演示：

与其说是答案，不如说是评论，但：

您是否考虑过将加载值放入html元素的数据属性中

<div id="serverload1" class="serverload" data-load="73"></div>
<div id="serverload2" class="serverload" data-load="13"></div>

---

根据您的综合回答，我能够得出以下解决方案：

 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的解决方案，但更通用：

---

注意：最后一条数字9只是为了测试代码的安全性。

这将产生$'73'。addClass'mynewclass'；但这里什么更通用？将宽度0设置为未定义的块。这是错误的，因为宽度应该是自动或不设置的。此外，我没有使用handler函数的类和参数，因为在DOM树中，块可能以未排序的方式列出，例如serverload3、serverload1、serverload2。您可能会争论依赖HTML中div的排序是否更通用，或者它们的ID是否始终是serverloadx；子字符串10。它更通用，因为您不必在每个div上设置id，我认为未定义的块应该具有0宽度，而不是自动或未设置，这将导致块元素的自动，因为后者将指示它们处于100%。请注意，您也可以使用ul>li构造，而不是将类添加到每个div。另外，我甚至不真正依赖HTML，我的代码不依赖任何HTML，而是依赖可以是任何选择器的类选择器。哪个条获取在barcolors数组中定义的宽度。

 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");
           }
       }

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");