Question

我正在为学校建立一个javascript BMI计算器，我正在添加一个显示BMI水平的量表元素，并根据体重不足，正常体重，超重或肥胖的颜色显示红色，黄色或绿色。

我正在使用justGage jquery插件进行测量。

我面临的问题是，每当用户点击表单的提交按钮时，旧仪表上方会出现一个新的Gauge并且它们会继续堆叠。我想让新的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继续将仪表附加到提交点击

1 个答案: