Question

我发现Bitwise Creative提供了一个很好的脚本，用值来改变数字内容的颜色。

$(function () {
    // Score Color
    var score = parseInt($('em').text().trim());
    var color = 'red';
    if (!isNaN(score)) {
        if (score >= 2) {
            color = 'orange';
        }
        if (score >= 3) {
            color = 'green';
        }
        $('em').css('color', color);
    }
});

我的问题： 它使用相同的颜色更改所有数字内容。因此，如果我有多个数字内容，则此脚本在数字和颜色之间没有区别。我如何修改它，例如每个[em]值[/ em]成为他自己的颜色？

<em>1</em> --> red
<em>2.5</em> --> orange
<em>3</em> --> green
<em>1.5</em> --> red

ASO。

Answer 1

$('em').text()会为您提供一个字符串，其中包含所有匹配元素的组合文字。

您需要迭代em元素并将颜色单独应用于它们

$(function () {
    // Score Color
    $( "em" ).each( function(){
        var score = parseInt($(this).text().trim());
        var color = 'red';
        if (!isNaN(score)) {
            if (score >= 2) {
                color = 'orange';
             }
             if (score >= 3) {
                 color = 'green';
             }
             $(this).css('color', color);
        }
    });
});

Answer 2

如果你想要得分为2.5那么颜色必须是橙色然后得分必须是float数字，你可以使用parseFloat将字符串转换为浮点数

可以做到

var score = parseFloat($('em').text().trim());

Answer 3

您可以声明Object将整数值映射到相应的颜色。

var couleurs = {
  1: 'red',
  [2.5] : 'orange'
}

以便您可以访问

$(this).css('color', couleurs[color]);

Answer 4

要简单：只需使用循环迭代所有ems：

$('em').each( function(){
   var score = parseInt( $(this).text().trim() ),
          color = 'red';

   if (!isNaN(score)) return;

   if (score >= 2) {
        color = 'orange';
   }
   if (score >= 3) {
        color = 'green';
   }
    $(this).css('color', color);
});

如何为每个具有不同结果的元素运行函数？

4 个答案: