Knob.js -有没有一种方法可以将拨号盘连接起来，使它们有一个合并的总数？

Question

我正在使用最新的jQuery Knob.js，我想知道是否有一种方法可以连接3个刻度盘，以便每个值都在“更改”时更改，以便合并后的总数永远不会超过100%？

最初，所有3个刻度盘都设置为33%。如果用户更换了其中一个刻度盘，则另外两个刻度盘应增加或减少，以使其总数等于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更改的旋钮。

在小提琴中，我添加了一个按钮来设置和重置所有3个旋钮的初始33。请注意，有一些微调丢失(有时所有旋钮的总和将等于略高于或小于100)，但这可能是由于所有旋钮的总和不具有100作为初始值，因为缺少1%。