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
  }
});

实时网址
RawGit

Answer 1

假设我的问题是正确的（如果没有，请发布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

2 个答案: