0

配列 arr1 があるとします。この配列を印刷したい (つまり、数値を表示するだけ) のですが、値に基づいて数値に色を付けたいと考えています。arr1[i]<15 の場合は緑、arr1[i]>20 の場合は赤、そうでない場合はオレンジ。この趣旨の何か。

var arr1 = [ 5,10,13,19,21,25,22,18,15,13,11,12,15,20,18,17,16,18,23,25,25,22,18,15,13,11,12,15,20,18];

これが私がやろうとしたことです：

        for(var i=0; i<arr1.length;i++){
            if(arr1[i]<15){
                var temp = $(this).css("color","green");
                $this.text(temp);
            } else if(arr1[i]>20){
                var temp = $(this).css("color","red");
                $this.text(temp);
            } else {
                var temp = $(this).css("color","orange");
                $this.text(temp);
            }

        }

個々の要素のcssプロパティを変更してdivに追加しようとしましたが、うまくいきませんでした。

誰かがこれを行うにはどうすればよいかを提案できますか?

4

3 に答える 3

3

私はお勧めします：

var arr1 = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18],
    target = document.getElementById('test');

for (var i = 0; i < arr1.length; i++) {
    var elem = document.createElement('span'),
        text = document.createTextNode(arr1[i]);
    elem.appendChild(text);
    if (arr1[i] < 15) {
        elem.style.color = 'green'
    } else if (arr1[i] > 20) {
        elem.style.color = 'red'
    } else {
        elem.style.color = 'orange'
    }
    target.appendChild(elem);
}​

JS フィドルのデモ

何を参照しているのかわからなかったので、単純な JavaScript を$(this)使用しています。既知の変数を使用して説明する方が簡単に思えました。

span評価対象のテキストを含めるために a を使用している理由は、単純に atextNodeを直接スタイル設定できないためです。属性を持つことができるのは要素だけです。style

于 2012-11-24T23:06:59.350 に答える
1

テキストの周りを包み、<span>代わりに色を付けます。

for(var i=0; i<arr1.length;i++){
    var value = arr1[i],
        element = $('<span/>',{'text':value}),
        color = '';

    if(value<15){
        color = 'green';
    } else if(value>20){
        color = 'red';
    } else {
        color = 'orange';
    }

    $this.append( element.css({'color':color}) );
}

http://jsfiddle.net/gaby/6w7xL/でのデモ

于 2012-11-24T23:07:54.043 に答える
1

テキスト ノードに直接 jQuery を使用して css を設定することはできません。テキストを含む要素上にある必要があります。

于 2012-11-24T23:04:26.207 に答える