从函数中获取价值 - Bootstrap-Slider

Question

我想要实现的目标：
从 Bootstrap-Sliders 接收身高和体重值，并使用这些值计算 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

Answer 1

假设我答对了（如果没答对，请 post 一个 jsfiddle 或 jsbin 示例），我认为您可以使用单个处理程序来进行更改：

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

function updateBmi(){
    var heightval = $('#height').val();
    var weightval = $('#weight').val();
    $('#bmi').text(weightval + heightval);
}

Answer 2

你可以看看下面的代码：

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

从函数中获取价值 - Bootstrap-Slider

Get Value from within a Function - Bootstrap-Slider

jquery

bootstrap-slider