Question

我有以下代码：

＆＃13;

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

＆＃13;

<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参数不会更新。

如何将动态值传递给它，以便进度条会在点击时听取更改？

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

方法参数的动态变量

1 个答案: