Question

说我有阵列，arr1。我想打印这个数组（即只显示数字），但是，我想根据它们的值为数字着色。如果arr1 [i]＆lt; 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中，但它对我不起作用。

有人可以建议我该怎么做？

Answer 1

我建议：

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 Fiddle demo

我使用的是纯JavaScript，因为我看不到$(this)所指的内容，只是简单地使用已知变量进行演示似乎更容易。

我使用span来包含正在评估的文字的原因仅仅是因为textNode无法直接设置样式，只有元素可以拥有style属性。

Answer 2

您不能直接在文本节点上使用jQuery设置css。它必须位于包含文本的元素上。

Answer 3

在文本周围换一个<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/

演示

为各个数组元素指定不同的颜色

3 个答案: