1

私が達成しようとしていること: Bootstrap-Sliders
から Height と Weight の両方の値を受け取り、これらの値を使用して 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-アンサー

$(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 に答える