javascript - 用 jQuery 动态控制一个旋钮

Question

我有两个旋钮，我想在移动第二个旋钮时动态控制第一个旋钮的值。

到目前为止我有:(第一个旋钮)

$('#inf-knob').knobRot({

                    classes: ['inf-knob'],
                    frameWidth: 250,
                    frameHeight: 250,
                    frameCount: 100,
                    detent: false,                  
                    discreteSteps: false,
                    stepCount: 0,
                    minimumValue: 0,
                    maximumValue: 2,
                    dragMultiplier: 0.01,
                    hideInput: true,
});

$('#inf-knob').on('knobdrag', function(e){
    //called until mouse button released

                    var dial = (500 * $('#inf-knob').val()).toFixed(1);

                    document.getElementById('freqmain').value = dial + " Hz";    
                    document.getElementById('freqmain2').value = dial;                   

}); 

(第二个旋钮在移动时应动态更改第一个旋钮)

$('#black-knob').on('knobdrag', function(e){

                  gainNode.gain.value = this.value;
                  console.log(this.value * 2);

                  $('#inf-knob').val(this.value * 2);

}); 

我也尝试过使用:

document.getElementById('inf-knob').value = this.value;

没有结果。

我错过了什么？

谢谢

Answer 1

如KnobRot的文档状态，您应该使用:

返回指定旋钮的值:

$('myselector').knobRot('get')

设置指定旋钮或多个旋钮的值(将与集合一起使用):

$('myselector').knobRot('set', value)

然后您需要触发 KnobRot 刷新。因此，在您的情况下，您可以将其用作:

 $('#black-knob').knobRot({           
    }).on('knobdrag', function(e){
        console.log(this.value * 2);
        $('#inf-knob').knobRot('set', this.value);
        $('#inf-knob').trigger('knobrefresh');
    }); 

而且，这是 Working JsFiddle Demo

附注

1. Fiddle 演示不显示 Knob 的图形图标，因为我无法弄清楚 KnobRot 所需的所有包含内容。但是你可以将鼠标悬停在文本字段下方拖动，并在展开光标时拖动出现了。
2. 我从未使用过此类插件。以及插件文档好像很差而且更新不频繁。为什么不使用不同的插件前言 jQuery-Knob demo和 code base .