方法参数的动态变量

时间:2018-01-29 20:40:50

标签: javascript jquery

我有以下代码:



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

这是一个进度条,每次检查/取消选中复选框时都会更新。问题是,当我选中/取消选中复选框时,raised函数中的jQmeter参数不会更新。

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

1 个答案:

答案 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)
  })
});