jQueryを使用して動的な値に応じて要素の色を変更する

Question

したがって、データベースからフェッチされた値を表示するボタンの色を変更したいと思います。値は-10から10の間で指定できます。 赤の5色と緑の5色を表示したいと思います。

これは私がこれまでに作ってみたものです：

HTML私はすべての日陰のためのelseif文を作ることを考えていた

  <button class="scoreTicker">{{ $score }} </button> 

JS

  var scoreTicker = parseInt($('.scoreTicker').innerHTML()); 

      if(scoreTicker < 0){ 
       $('.scoreTicker').css('background', 'red'); 
      } 
      else(scoreTicker > 0){ 
       $('.scoreTicker').css('background', 'green'); 
      } 

、これは少し過度のように思える10の条件文をもたらすでしょう。これを行うよりスマートな方法がありますか？あなたは色の濃淡を使用しているので

Answer 1

あなたはRGBまたはHEXコードの配列を作ることができますボタンの値が配列内の色のインデックスを表すような方法でインデックスを作成します。ですから、このような方法でそれを使用して終了します：

$('.scoreTicker').css('background-color', colors[buttonValue]); 

Answer 2

、あなたはとても似scoreTicker値に基づいて進コードを計算することができます。

$(".scoreTicker input").on("input", function() { 
 
    var scoreTicker = parseInt($(this).val()); 
 
    var color = { 
 
    red: 0, 
 
    green: 0, 
 
    blue: 0 
 
    }; 
 
    if (scoreTicker >= 0) { 
 
    // green 
 
    color.green = 25.5 * Math.abs(scoreTicker); 
 
    } else { 
 
    // red 
 
    color.red = 25.5 * Math.abs(scoreTicker); 
 
    } 
 

 
    $('.scoreTicker').css('background', "rgb(" + color.red + ", " + color.green + ", " + color.blue + ")"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="scoreTicker"> 
 
    <input class="scoreTicker" type="range" min="-10" max="10" step="2" /> 
 
</div>