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

Question

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

Answer 1

我建议您按以下方式重组代码:

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/