¿Alguna idea sobre cómo usar valores numéricos negativos para rangos variables?
var colorMatch = { '0-19' : 'red', '20-59' : 'orange', '60-100' : 'green'};
He estado usando este código JS de la pregunta anterior para colorear texto con rangos numéricos variables
https://stackoverflow.com/a/31805767/7922942
Que enlaza con este violín
Por ejemplo, estoy tratando de '-5-0' : 'blue', etc.
¿Alguna idea/solución alternativa?
Sugeriría cambiar la estructura del objeto mc de la siguiente manera:
var mc = { blue: [-10, -1], red: [0, 19], orange: [20, 59], green: [60, 100] };De esta manera, no tendrá que analizar el rango de una cadena.
$(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>Hola, he hecho este script simple para ti. Creo que es simple de entender/usar.
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>