It turned out I didn't need an id
to tell them apart.
var knobs = [],
cdata = [
{name: 'knob0', value: 1},
{name: 'knob1', value: 2},
{name: 'knob2', value: 5},
{name: 'knob3', value: 200},
{name: 'knob4', value: 400},
{name: 'knob5', value: 800},
{name: 'knob6', value: 1000},
{name: 'knob7', value: 2000},
{name: 'knob8', value: 3000},
{name: 'knob9', value: 5000},
{name: 'knob10', value: 8000},
{name: 'knob11', value: 10000},
{name: 'knob12', value: 20000},
{name: 'knob13', value: 1200},
{name: 'knob14', value: 8000},
{name: 'knob15', value: 12000},
{name: 'knob16', value: 12000},
{name: 'knob17', value: 12000},
{name: 'knob18', value: 12000},
{name: 'knob19', value: 12000},
{name: 'knob20', value: 16000},
{name: 'knob21', value: 16000},
{name: 'knob22', value: 16000},
{name: 'knob23', value: 18000},
{name: 'knob24', value: 20000}
];
$(document).ready(function () {
$('.dial').each(function (e) {
knobs.push(0);
$(this).knob({
max: 99,
width: 120,
height: 120,
bgColor: '#85d4b0',
fgColor: '#0ca961',
inputColor: '#0ca961',
thickness: 0.15,
change: function (v) {
knobs[e] = v; //e can be used as an identifier
console.log(calculate());
}
});
});
});
function calculate() {
var result = 0;
for (var i = 0; i < cdata.length; i++){
result += knobs[i] * cdata[i].value;
}
return result;
}
Here I'm using e
as an identifier, which allows me to maintain an array
of knob values and thus store every knob's value individually.
Then the calculate();
function reads the array and multiplies each value by a specific amount (as specified in cdata) and returns the result.