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());
        });

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