javascript - Knob.js - 有没有一种方法可以链接拨号盘，以便它们具有总和？

Question

我正在使用最新的 jQuery Knob.js，想知道是否有一种方法可以链接 3 个刻度盘，以便每个值在“更改”时发生变化，从而使总和永远不会超过 100%？

最初，所有 3 个旋钮均设置为 33%。如果用户更改其中一个刻度盘，其他 2 个刻度盘应增加或减少，总计等于 100。

Answer 1

因为我喜欢这个想法，所以我刚刚创建了一个 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() 然后为每个旋钮调用 changeKnob()，除了以 kDiff 的一半进行更改的旋钮之外。
在 Fiddle 中，我添加了一个按钮来将所有 3 个旋钮设置和重置为初始值 33。请注意，缺少一些微调(有时所有旋钮的总和将等于 100 稍高于或低于 100)，但这可能是由于例如由于缺少 1%，所有旋钮的总和不以 100 作为初始值。