在 jQuery 旋钮库中禁用舍入

Question

我有一个浮点值，它来自 JSON 数据。调用 console.log() 显示正确的值 fe: 12.3。但我不知道为什么，当我尝试用 val() 设置此值时，它会舍入值 fe: 12.0?

如果值为23.4，则显示23.0。如果 31.8，显示 32.0.

这是我要设置值的片段：

$(document).ready(function() {
  var color = 'green'
  $('.dial').knob({
    'min': 0,
    'max': 100,
    'width': "100%",
    'height': "100%",
    'displayInput': true,
    'fgColor': color,
    'readOnly': true,
    'draw': function() {
      $(this.i)
        .val(this.cv.toFixed(1) + 'ms')
        .css('font-size', '15pt')
        .css('color', 'black');
    }
  });
});

这是设置值的代码：

$.ajax({
  url: "stats.php",
  type: "POST",
  data: data
}).done(function(answer) {
  console.log(answer)
  time = answer.TIME
  time = parseFloat(time)
  $(<?php echo "host".$i ?>).val(time);
  $(<?php echo "host".$i ?>).trigger('change');
  setColor();
});

谢谢！

Answer 1

默认情况下jQuery旋钮仅支持整数。要使其正确格式化浮点值，您需要将 step 参数设置为您需要的精度级别。在这种情况下，0.1:

$(document).ready(function() {
  var color = 'green'

  $('.dial').knob({
    min: 0.0,
    max: 100.0,
    step: 0.1, // add this
    width: "100%",
    height: "100%",
    displayInput: true,
    fgColor: color,
    readOnly: true,
    draw: function() {
      $(this.i).val(this.cv.toFixed(1) + 'ms').css({
        'font-size': '1em',
        'color': 'black'
      });
    }
  });

  // for testing
  let value = 12.3;
  $('.dial').val(value).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" integrity="sha512-NhRZzPdzMOMf005Xmd4JonwPftz4Pe99mRVcFeRDcdCtfjv46zPIi/7ZKScbpHD/V0HB1Eb+ZWigMqw94VUVaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<input type="text" class="dial" />

另请注意，我调整了输出的字体大小，使其适合控件。

在 jQuery 旋钮库中禁用舍入

Disable rounding in jQuery knob library

javascript

jquery

jquery-knob