0

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

到目前为止我有：（第一个旋钮）

$('#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;

没有结果。

我错过了什么？

谢谢

4

1 回答 1

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

而且，这里是工作 JsFiddle 演示

附言

  1. Fiddle 演示没有显示 Knob 的图形图标，因为我无法弄清楚 KnobRot 所需的所有包含。但是，您可以将鼠标悬停在文本字段下方，并在出现扩展光标时拖动。
  2. 我从来没有使用过这种类型的插件。而且插件文档似乎很差而且不经常更新。为什么不使用不同的插件，比如jQuery-Knob 演示 和代码库。
于 2014-07-23T21:56:51.060 回答