Question

因此，我想更改按钮上的颜色，该按钮显示从数据库中获取的值。该值可以介于-10和10之间。我想显示5种红色和5种绿色。

这是我到目前为止所提出的：

HTML

            <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');
            }

我正在考虑为每个阴影制作一个elseif语句，这会导致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>

使用jQuery根据动态值更改元素的颜色

2 个答案: