CODEWITHSUNDEEP
javascriptjquery
anon
anon

Reputation:

Dynamic variables on method parameters

I have the following code:

$('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>

This is a progress bar that gets updated everytime I check / uncheck a checkbox. The issue is, the raised parameter inside the jQmeter function is not updating when I check / uncheck a checkbox.

How can I pass it a dynamic value so the progress bar will listen to changes on click?

Upvotes: 0

Views: 103

Answers (1)

Barmar
Barmar

Reputation: 780879

This plugin doesn't maintain any state, you can't just fill in a specific parameter and have it update the meter. Just call it each time with all the parameters, and the updated clickedItems value.

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

Upvotes: 1

Related Questions