Question

我正在使用旋钮jQuery创建一个交互式旋钮，这样可以让阳光看到消耗多少能量的电网

这是生成旋钮的代码

$(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'
})

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

1 个答案: