javascript - 使用查询旋钮更改旋钮的颜色

Question

我正在使用旋钮 jQuery 创建一个交互式旋钮，让 sunstantial 查看其电网消耗了多少能量

这是生成旋钮的代码

$(function(){

      $(".dial").knob({
            'min':0,
            'max':5000,
            'readOnly': true,
            'width': 120,
            'height': 120,
            'float' : 'left',
            'fgColor': '#b9e672',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true,
            'skin':'tron'
        }) 

      // body...
    });

这是输入：

<input id='knobinput' type='text' value='75' class='dial'>

我想确保如果旋钮小于 1500 为绿色，如果在 1500 和 3000 之间为黄色，如果高于 3000 则为红色。

我怎样才能做到这一点？

谢谢

Answer 1

尝试这个：

var $dial = $('.dial');
var dialColour = '#C00';
if ($dial.val() < 3000) {
    dialColour = '#CC0';
}
else if ($dial.val() < 1500) {
    dialColour = '#0C0';
}

$dial.knob({
    'min':0,
    'max':5000,
    'readOnly': true,
    'width': 120,
    'height': 120,
    'float' : 'left',
    'fgColor': dialColour,
    'dynamicDraw': true,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'skin':'tron'
})