我有以下代码:
$('input[type="checkbox"]').each(function(el) {
$(this).click(function(el) {
if($(this).is(':checked')) {
clickedItems += 100;
$('#jqmeter-container').jQMeter({raised: clickedItems})
} else {
clickedItems -= 100;
}
})
});
$('#jqmeter-container').jQMeter({
goal:'$600',
raised: '$' + clickedItems,
meterOrientation:'horizontal',
width:'100%',
height:'50px'
});

<ul>
<li><label>1</label><input type="checkbox"></li>
<li><label>1</label><input type="checkbox"></li>
<li><label>1</label><input type="checkbox"></li>
<li><label>1</label><input type="checkbox"></li>
<li><label>1</label><input type="checkbox"></li>
<li><label>1</label><input type="checkbox"></li>
</ul>
&#13;
这是一个进度条,每次检查/取消选中复选框时都会更新。问题是,当我选中/取消选中复选框时,raised
函数中的jQmeter
参数不会更新。
如何将动态值传递给它,以便进度条会在点击时听取更改?
答案 0 :(得分:1)
此插件不保持任何状态,您不能只填写特定参数并让它更新仪表。只需每次调用所有参数和更新的clickedItems
值。
var clickedItems = 0;
var jqmeter_params = {
goal: '$600',
raised: '$' + clickedItems,
meterOrientation: 'horizontal',
width: '100%',
height: '50px'
};
$('#jqmeter-container').jQMeter(jqmeter_params);
$('input[type="checkbox"]').each(function(el) {
$(this).click(function(el) {
if ($(this).is(':checked')) {
clickedItems += 100;
} else {
clickedItems -= 100;
}
jqmeter_params.raised = '$' + clickedItems;
$('#jqmeter-container').jQMeter(jqmeter_params)
})
});