使用 JQuery 更改顏色

Question

目前我正在做一個門戶網站，當達到 70% 的利用率時，圖表不會改變顏色。

不幸的是，我試圖應用“如果”語句並沒有反映在我的圖表中。

<div class="progress-box text-center">
  <input type="text" class="knob dial1" value="66" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="" readonly>
  <h5 class="text-blue padding-top-10 weight-500">Central</h5>
</div>

$('.dial1').attr('data-fgColor', '#11E117');
$(".dial1").knob();

$({
  animatedVal: 0
}).animate({
  animatedVal: 66
}, {
  duration: 3000,
  easing: "swing",
  step: function() {
    $(".dial1").val(Math.ceil(this.animatedVal)).trigger("change");
  }
});

如果百分比達到 70% 的利用率，圖表可以將顏色更改為紅色。

Answer 1

要動態更改顏色，您可以使用旋鈕庫的configure事件，您可以在動畫的每個步驟中調用它。

請注意，我將本示例中的值修改為100 ，以顯示所有顏色步驟。

 $('.dial1').knob(); var colors = ['#11E117', '#CC0', '#C00'] $({ animatedVal: 0 }).animate({ animatedVal: 100 }, { duration: 3000, easing: "swing", step: function() { var val = Math.ceil(this.animatedVal); $(".dial1").trigger('configure', { 'fgColor': colors[(val < 70) ? 0 : (val < 90) ? 1 : 2] }).val(val).trigger("change"); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script> <div class="progress-box text-center"> <input type="text" class="knob dial1" value="66" data-width="120" data-height="120" data-thickness="0.40" data-fgColor="" readonly> <h5 class="text-blue padding-top-10 weight-500">Central</h5> </div>

Answer 2

.dial1 是一個 css 類，因此它沒有 data-fgColor 屬性。

如果您想更改 data-fgColor，您需要在輸入標簽中分配一個 id。

然后你可以這樣做：

$('#inputId').attr('data-fgColor', '#11E117');

Answer 3

很難說你在追求什么，所以我只是假設當“.dial1”的值為 70 或更多時你想要顏色變化？

$(".dial1").on("change", function (){
    if($(this).val() >= 70){
        $(".progress-box").css({"background-color":"red"});
    }
    else{
        $(".progress-box").css({"background-color":"blue"});
    }
})

Answer 4

$('any_selector').attr('any_attribute','any_value');

嘗試一下！