用 JS 和负数值变量范围为文本着色答案

【问题标题】：Coloring Text with JS and negative numeric variable ranges用 JS 和负数值变量范围为文本着色
【发布时间】：2021-11-04 19:20:05
【问题描述】：

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

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

};

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

https://stackoverflow.com/a/31805767/7922942

哪个链接到这个Fiddle

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

有什么想法/解决方法吗？

【问题讨论】：

标签： javascript html var

【解决方案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>

【讨论】：

非常感谢您的帮助。更新了JSBin 供任何展望未来的人使用。

【解决方案2】：

您好，我为您制作了这个简单的脚本。我相信它很容易理解/使用。

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>

【讨论】：