使用jQuery根據動態值更改元素的顏色

因此，我想更改顯示從數據庫中提取的值的按鈕的顏色。該值可以在-10和10之間。我想顯示5個紅色陰影和5個陰影。使用jQuery根據動態值更改元素的顏色

這是我想出迄今：

HTML

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

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

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

我想使ELSEIF語句爲每個燈罩，這會導致10個條件語句，這似乎有點矯枉過正。有沒有更聰明的方法來做到這一點？

來源

2017-02-20 Adam Dedanga

您可能會發現我的解決方案有趣的，如果你不希望在一個數組 – mhodges

你可以使RGB或十六進制代碼組成的數組並以這樣一種方式對它進行索引，即按鈕值將表示數組中的顏色索引。所以，你最終會以這樣的方式使用它：

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

來源

2017-02-20 19:45:12 zilvinas

智能預先定義的顏色，應該工作。 –

由於您使用的是顏色的深淺，你可以計算出基於該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>

來源

2017-02-20 19:41:13 mhodges

使用jQuery根據動態值更改元素的顏色

回答

相關問題