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/

Answer 2

これを試して...

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

Answer 3

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 は、コードの安全性をテストするためのものです。

Answer 4

寄せられた回答を総合して、次の解決策を導き出すことができました。

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

Answer 5

答えというよりはコメントですが：

html 要素の data 属性に load 値を入れることを考えたことはありますか?

<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/

Answer 6

jQuery

.addClass()クラスを追加するため。

Answer 7

これを試して、

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