1

我想要实现的目标：从Bootstrap-Slider
接收身高和体重值，并使用这些值来计算 BMI。

当前问题：由于该事件
，无法从每个函数中获取身高和体重值。.change

欢迎提出建议和意见，
谢谢！

JS

$(function() {
  // Weight
  $('#weight').slider({
    formatter: function(value) {
        return value;
    }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
  $('#weight').change(function() {
    var weightval = $('#weight').val();
  });
  // Height
  $('#height').slider({
    formatter: function(value) {
        return 'Height: ' + value;
    }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
  $('#height').change(function() {
    var heightval = $('#height').val();
  });
  // BMI
  $('#bmi').text(weightval + heightval);
});

JS - 也试过了。

  var heightval;
  $('#height').change(function() {
    heightval = $('#height').val();
  });
  $('#bmi').text(heightval);

HTML

    <input id="weight" data-slider-id='weightSlider' type="text" data-slider-min="50" data-slider-max="150" data-slider-step="1" data-slider-value="0"/>
    <input id="height" data-slider-id='heightSlider' type="text" data-slider-min="100" data-slider-max="250" data-slider-step="1" data-slider-value="0"/>

JS -Anwser

$(function() {
  // Weight
  $('#weight').slider({
    formatter: function(value) {
        return value;
    }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
  $('#weight').change(updateBmi);
  // Height
  $('#height').slider({
    formatter: function(value) {
        return 'Height: ' + value;
    }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
  $('#height').change(updateBmi);

  function updateBmi(){
    var heightval = $('#height').val(); // Height
    var weightval = $('#weight').val(); // Weight
    var bmicalc = (weightval/heightval)/heightval; // BMI Calc
    var bmi = Math.round(bmicalc * 10) / 10; // Decimal
    $('#bmi').text(bmiround); // Display Value
  }
});

实时 URL
RawGit

4

2 回答 2

0

假设我的问题是正确的（如果不是，请发布 jsfiddle 或 jsbin 示例），我认为您可以使用单个处理程序进行更改：

$('#weight').change(updateBmi);
$('#height').change(updateBmi);  

function updateBmi(){
    var heightval = $('#height').val();
    var weightval = $('#weight').val();
    $('#bmi').text(weightval + heightval);
}
于 2015-09-22T12:02:13.920 回答
0

你可以看看下面的代码：

$(function() {
  // Weight
  var weightSlider = $('#weight').slider({
    formatter: function(value) {
        return value;
    }
  }).on('slideStop', function(ev){
     calculateBMI();
  });

  // Height
  var heightSlider = $('#height').slider({
    formatter: function(value) {
        return 'Height: ' + value;
    }
  }).on('slideStop', function(ev){
     calculateBMI();
  });

  function calculateBMI(){
      // BMI
      var weightSelected = weightSlider.getValue();
      var heightSelected = heightSlider.getValue();
      $('#bmi').text(weightSelected + heightSelected );
  }
});

无需参加.change活动

于 2015-09-22T12:11:39.347 回答