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

Question

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

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

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

这是我的代码。

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

Answer 1

我能想到的最好方法是将对象声明移到 validate() 函数之外。然后你可以在函数中引用同一个对象，并在页面首次加载时创建的 guage 上使用 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);
    }
  });
});

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

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

justGage keeps appending the meter on Submit click

html

javascript

jquery

justgage