Knob.js-有没有一种方法可以连接表盘，使它们有一个组合的总数

Knob.js - Is there a way to link up dials so that they have a combined total?

本文关键字：有一个 组合 连接 有没有 js- 方法 一种 Knob      更新时间：2023-09-26

我正在使用最新的jQuery Knob.js，想知道是否有一种方法可以连接3个表盘，使每个值在"更改"时发生变化，以使组合总数永远不会超过100%？

最初，所有3个刻度盘都设置为33%。如果用户改变了其中一个表盘，则另一个2应该增加或减少到总共等于100。

因为我喜欢这个想法，我刚刚创建了一个Fiddle:

$(function () {
  $('.knob').knob({
    readOnly: false,
        'width': 150,
        'height': 150,
        'dynamicDraw': true,
        'thickness': 0.4,
        'tickColorizeValues': true,
        'skin': 'tron',
    displayInput: true,
    change: function (value) {
        var tKnobsVal = 0;
        $(".knob").each(function () {
            tKnobsVal += parseInt($(this).val());
        });
        var kDiff = tKnobsVal - 100;
        adjustKnob(this.$.attr("id"), kDiff);
    }
});
$('#btn').click(function () {
    $({
        value: $('.knob').val()
    }).animate({
        value: 33
    }, {
        duration: 700,
        easing: 'swing',
        progress: function () {
            $('.knob').val(Math.round(this.value)).trigger('change');
        }
    });
  });
});
function adjustKnob(id, value) {
  var cValue = value / 2;
  $(".knob").not("[id=" + id + "]").each(function () {
    changeKnob($(this).attr("id"), cValue);
  });
}
function changeKnob(id, value) {
  $({
    value: $("#" + id).val()
  }).animate({
    value: $("#" + id).val() - value
  }, {
    duration: 700,
    easing: 'swing',
    progress: function () {
        $("#" + id).val(Math.round(this.value)).trigger('change');
    }
  });
}

在旋钮change事件上，检索所有旋钮值的总和：

var tKnobsVal = 0;
$(".knob").each(function () {
            tKnobsVal += parseInt($(this).val());
        });

然后用值var kDiff = tKnobsVal - 100;（与100的差值）和已更改的旋钮的id调用函数adjustKnob()。adjustKnob()然后为除用kDiff的一半改变的旋钮之外的每个旋钮调用changeKnob()
在Fiddle中，我添加了一个按钮，将所有3个旋钮设置并重置为初始33。请注意，有一些微调缺失（有时所有旋钮的总和将略高于或低于100），但这可能是由例如所有旋钮的总数由于缺失1%而没有将100作为初始值引起的。

相关文章：