0

我正在为学校构建一个 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>

4

1 回答 1

0

我能想到的最好方法是将对象声明移到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);
    }
  });
});

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

于 2016-03-13T01:24:25.497 回答