Javascript jQuery旋钮-按需返回多个旋钮的值?
[jsFiddle][1] 我需要使用jQuery按需访问正确显示的[旋钮][2]值。 我知道“更改”功能,但我需要一次访问多个旋钮的值 我需要将每个旋钮的值乘以具体的数值,然后求和结果;有没有办法让'change'函数提供旋钮的id或其他一些识别属性,以便我的脚本可以区分它们的值 到目前为止,这个计算功能就是我所拥有的,我已经在每个旋钮的“变化”和单击按钮时触发它:Javascript jQuery旋钮-按需返回多个旋钮的值?,javascript,jquery,jquery-events,multiple-instances,jquery-knob,Javascript,Jquery,Jquery Events,Multiple Instances,Jquery Knob,[jsFiddle][1] 我需要使用jQuery按需访问正确显示的[旋钮][2]值。 我知道“更改”功能,但我需要一次访问多个旋钮的值 我需要将每个旋钮的值乘以具体的数值,然后求和结果;有没有办法让'change'函数提供旋钮的id或其他一些识别属性,以便我的脚本可以区分它们的值 到目前为止,这个计算功能就是我所拥有的,我已经在每个旋钮的“变化”和单击按钮时触发它: function calculate() { var result = 0; $('.dial').each(f
function calculate() {
var result = 0;
$('.dial').each(function (e) {
result += $(this).val(); //Multiply by 1 to get an int
});
$('#result').text((typeof result) + ' ' + result); //Why is this a string in the first place?
}
使用此按钮设置旋钮:
$('.dial').each(function (e) {
$(this).knob({
max: 99,
width: 120,
height: 120,
bgColor: '#85d4b0',
fgColor: '#0ca961',
inputColor: '#0ca961',
thickness: 0.15,
change: function (v) {
console.log(v, this.v, this.cv);
calculate(); //I need it to (re-)calculate every time any knob's value changes
}
});
}
.val不工作,因为它似乎落后了;第一次运行时,它不会更新结果和连续运行的次数,但会将其更改为以前的值
有什么想法吗
编辑:
如果我能得到其值发生变化的旋钮的id,我可以执行以下操作:
var knobs = [{
id: '',
val: 0
}];
$('.dial').each(function () {
$(this).knob({change: function(v, id){
knobsMod(v, id);
}});
});
$('.dial').parent().each(function (e) {
$(this).attr('id', 'knob'+e);
if (e > (knobs.length - 1)) {
knobs[e] = $.extend({}, knobs[0]);
}
knobs[e].id = $(this).attr('id');
knobs[e].val = $(this).val()*1;
});
function knobsMod(v, id){
for (var i = 0; i < knobs.length; i++){
if (knobs[i].id === id){
knobs[i].val = v;
break;
}
}
}
然后它可以在重新计算时读取knobs对象。
[1]:
[2] :原来我不需要身份证就能把他们分开
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;
}
这里我使用e作为标识符,它允许我维护一个旋钮值数组,从而单独存储每个旋钮的值
然后进行计算;函数读取数组并将每个值乘以cdata中指定的特定值,然后返回结果