justGage 在提交点击时不断附加仪表

justGage keeps appending the meter on Submit click

本文关键字：仪表提交 justGage 更新时间：2023-09-26

我正在为学校构建一个javascript BMI计算器，我正在添加一个仪表元素，该元素显示BMI水平并根据体重不足，正常体重，超重或肥胖将条形涂成红色，黄色或绿色。

我正在使用justGage jquery插件作为仪表。

我面临的问题是，每当用户单击表单的提交按钮时，旧仪表上方都会出现一个新的仪表，并且它们会不断堆叠。我想用新的仪表取代旧的。

这是我拥有的代码。

$(function() {
  $('#bmiKG').validate({
    success: "valid",
    submitHandler: function() {
      event.preventDefault();
      var htCn = Number($('#heightCN').val());
      var htM = Number($('#heightM').val());
      var wtKg = Number($('#weightKG').val());
      var topline_KG = wtKg;
      console.log('The Top line of the function eguals: ' + topline_KG);
      var btmline_KG = Math.pow(((htCn / 100) + htM), 2);
      console.log('The Bottom line of the function eguals: ' + btmline_KG);
      var bmi_KG = Math.round((topline_KG / btmline_KG) * 100) / 100;
      console.log('The BMI equals: ' + bmi_KG);
      document.getElementById('output_KG').innerHTML = bmi_KG;
      var g_kg;
      var g_kg = new JustGage({
        id: "g_kg",
        value: bmi_KG,
        min: 0,
        max: 50,
        decimals: 2,
        title: "BMI",
        label: "BMI",
        customSectors: [{
          color: "#FCFF00",
          lo: 0,
          hi: 18.4
        }, {
          color: "#00A200",
          lo: 18.5,
          hi: 24.9
        }, {
          color: "#FCFF00",
          lo: 25,
          hi: 29.9
        }, {
          color: "#FF0000",
          lo: 30,
          hi: 50
        }],
      });
    }
  });

});

#g_kg {
  width: 200px;
  height: 160px;
  display: inline-block;
  margin: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="//cdn.jsdelivr.net/raphael/2.1.2/raphael-min.js"></script>
<script src="//cdn.jsdelivr.net/justgage/1.0.1/justgage.min.js"></script>
<body>
  <div>
    <form id="bmiKG" action="http://www.google.com">
      <label for="heightCN">Height in Centimeters</label>
      <br>
      <input type="number" name="heightCN" id="heightCN" class="required number">
      <br>
      <label for="heightM">Height in Meters</label>
      <br>
      <input type="number" name="heightM" id="heightM" class="required number">
      <br>
      <label for="weightKG">Weight in Kilograms</label>
      <br>
      <input type="number" name="weightKG" id="weightKG" class="required number">
      <br>
      <button type="submit" name="bmiKG_submit" id="bmiKG_submit">Compute BMI</button>
    </form>
    <p>Your BMI is: <span id="output_KG"></span>
    </p>
    <div id="g_kg"></div>
  </div>
</body>

我能想到的最好的方法是将对象声明移动到validate()函数之外。然后，您可以在函数中引用同一对象，并在页面首次加载时创建的量规上使用 refresh(val) 方法。

$(function() {
  var g_kg = new JustGage({
        id: "g_kg",
        value: 0,
        min: 0,
        max: 50,
        decimals: 2,
        title: "BMI",
        label: "BMI",
        customSectors: [{
          color: "#FCFF00",
          lo: 0,
          hi: 18.4
        }, {
          color: "#00A200",
          lo: 18.5,
          hi: 24.9
        }, {
          color: "#FCFF00",
          lo: 25,
          hi: 29.9
        }, {
          color: "#FF0000",
          lo: 30,
          hi: 50
        }],
  });

  $('#bmiKG').validate({
    success: "valid",
    submitHandler: function() {
      event.preventDefault();
      var htCn = Number($('#heightCN').val());
      var htM = Number($('#heightM').val());
      var wtKg = Number($('#weightKG').val());
      var topline_KG = wtKg;
      console.log('The Top line of the function eguals: ' + topline_KG);
      var btmline_KG = Math.pow(((htCn / 100) + htM), 2);
      console.log('The Bottom line of the function eguals: ' + btmline_KG);
      var bmi_KG = Math.round((topline_KG / btmline_KG) * 100) / 100;
      console.log('The BMI equals: ' + bmi_KG);
      document.getElementById('output_KG').innerHTML = bmi_KG;
      // the documentation isn't really clear for justgage, but
      // the 2nd parameter is the new max value. I'm not sure if it can be omitted
      g_kg.refresh(bmi_KG, null);
    }
  });
});

使用此方法，您只需更改现有仪表的值，而不是在每次运行验证函数时创建一个新仪表。