Question

我正在尝试制作一个BMI计算器，可以在任何人更改值时自动计算BMI（无需单击计算按钮）。我目前有两个选择输入脚和英寸，然后我使用jQuery UI使用滑块输入重量。我的问题是，当选择输入导致BMI重新计算时，对滑块的任何更改似乎都不会重新计算BMI。我是JavaScript和jQuery的新手，非常感谢他们的帮助。

使用Javascript：

"use strict";
$(document).ready(function() {
  $("#sliderWeight").slider({
  value: 150,
  min: 91,
  max: 443,
  slide: function(evt, elem) {
    $("#weight").text(elem.value);
    },
  start: function(evt, elem) {
    $("#weight").addClass("heavytext")
    },
  stop: function(evt, elem) {
    $("#weight").removeClass("heavytext")
   }
 });

$("#weight").text($("#sliderWeight").slider("value"));


function displayVals() {
var feetValues = parseInt($("#feet").val());
var inchValues = parseInt($("#inches").val());
var inches = feetValues * 12 + inchValues;
var weightSlider = parseInt($("#sliderWeight").slider("value"));
var bmiWeight = weightSlider * 703
var bmiHeight = inches * inches
var bmi = Math.round(bmiWeight / bmiHeight);
$("#totalinches").html("You selected: <b>Feet:</b> " + feetValues +
  " <b>Inches:</b> " + inchValues + "<br>That is " + inches + " inches.");
$("#bmi").html("Your BMI is " + bmi);
}
$("select").change(displayVals);
displayVals();
});

HTML：

<select id="feet">
  <option value="4">4 feet</option>
  <option value="5">5 feet</option>
  <option value="6">6 feet</option>
  <option value="7">7 feet</option>
</select>
<select id="inches">
  <option value="0">0 inches</option>
  <option value="1">1 inches</option>
  <option value="2">2 inches</option>
  <option value="3">3 inches</option>
  <option value="4">4 inches</option>
  <option value="5">5 inches</option>
  <option value="6">6 inches</option>
  <option value="7">7 inches</option>
  <option value="8">8 inches</option>
  <option value="9">9 inches</option>
  <option value="10">10 inches</option>
  <option value="11">11 inches</option>
</select>
<br>
<br>

<div id="totalinches"></div>
<br>
<h3>Please select your weight:</h3>
<br>

<div id="sliderWeight" class="sliderClass"></div>
<br>
<div id="dynamicweight">Your current weight is <span id="weight"></span> lbs.
</div>
<div id="bmi"></div>

CSS：

.heavytext {
   font-weight: bold;
   color: #29abe2;
}

.sliderClass {
  width: 400px;
}

JSFiddle-BMI Calculator

Answer 1

在幻灯片事件中调用显示方法

＆＃13;

$("#sliderWeight").slider({
    value: 150,
    min: 91,
    max: 443,


    slide: function(evt, elem) {
      $("#weight").text(elem.value);
      displayVals();
    },
    start: function(evt, elem) {
      $("#weight").addClass("heavytext")
    },
    stop: function(evt, elem) {
      $("#weight").removeClass("heavytext")
    }
  });

＆＃13;

jQuery UI滑块在BMI计算器中没有正确更新

1 个答案: