用 JS 和负数值变量范围给文本着色

Question

知道如何为变量范围使用负数值吗？

var colorMatch = {
'0-19'     : 'red',
'20-59'    : 'orange',
'60-100'   : 'green'

};

我一直在使用上一个问题中的这段 JS 代码来为具有可变数值范围的文本着色

链接到这个Fiddle

例如我正在尝试 '-5-0' : 'blue', 等

周围有 thoughts/work 吗？

Answer 1

我建议按如下方式更改 mc 对象的结构：

var mc = {
  blue: [-10, -1],
  red: [0, 19],
  orange: [20, 59],
  green: [60, 100]
};

这样，您就不必从字符串中解析范围。

$(document).ready(function(){
  
  var mc = {
    blue: [-10, -1],
    red: [0, 19],
    orange: [20, 59],
    green: [60, 100]
  };
  
  function between(x, min, max) {
    return x >= min && x <= max;
  }


  
  var dc;
  var first; 
  var second;
  var th;
  
  $('p').each(function(index){
    
    th = $(this);
    
    dc = parseInt($(this).attr('data-color'), 10);
        
    $.each(mc, function(color, [min, max]) {
      first = parseInt(min, 10);
      second = parseInt(max, 10);

      if(between(dc, first, second)){
        th.addClass(color);
      }
    });
  });
});

.blue {color:blue}
.red {color:red}
.orange {color:orange}
.green {color:green}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p data-color="-5">Lorem -5</p>
<p data-color="19">Lorem 19</p>
<p data-color="25">Lorem 25</p>
<p data-color="55">Lorem 55</p>
<p data-color="60">Lorem 60</p>
<p data-color="61">Lorem 61</p>
<p data-color="100">Lorem 100</p>

Answer 2

您好，我为您制作了这个简单的脚本。我相信 understand/use.

很简单

function colorFromRange(number) {
  var defaultColor = "orange"
  var ranges = [
    {
      start: -5,
      end: 0,
      color: "blue"
    },
    {
      start: 0,
      end: 5,
      color: "red"
    },
    {
      start: 5,
      end: 10,
      color: "green"
    }
  ]
   
   
  var chosenColor = ranges.find(area => (number >= area.start && number <= area.end))
  return chosenColor ? chosenColor.color : defaultColor
}

function spoilColor(color) {
  document.getElementById('spoiler').style.color = color
}

<h1 id=spoiler>Text with color changing effect.</h1>
<br>
<input type=number step=1 value=0 id=number oninput=spoilColor(colorFromRange(this.value)) />
<p>
  Text changes color according to the input's value.
</p>

用 JS 和负数值变量范围给文本着色

Coloring Text with JS and negative numeric variable ranges

html

javascript

var