通过滑块更改输入时进行计算

Question

我有一个问题让这个工作。

当其他2个输入之一发生变化时，我需要计算输入bmi_val。用户可以直接更改这两个输入（将值写入其中一个）或通过jQuery滑块更改。第一种情况（输入直接改变）有效，但第二种情况我无法弄明白。

JSFiddle

＆＃13;

＆＃13;

//compute BMI
$(document).ready(function() {
    $("input#height_value, input#weight_value").on('input', function() {
       $("#height_value").ready(function() {           
           var $val2 = $('input#height_value', this).val();
           var $val1 = $('input#weight_value', this).val();
           
           var $total = $val1 / ($val2/100 * $val2/100);

           $('input#bmi_val', this).val($total);
       });
   });      
});
//slider height
$(document).ready(function() {
	$( "#height_slider" ).slider({
		range: "max",
		min: 100,
		max: 225,
		value: 175,
		slide: function( event, ui ) {
			$( "#height_value" ).val( ui.value );
			$(ui.value).val($('#height_value').val());
		}
	});
	$("#height_value").keyup(function() {
		$("#height_slider").slider("value" , $(this).val())
	});
});
//slider weight
$(document).ready(function() {
	$( "#weight_slider" ).slider({
		range: "max",
		min: 35,
		max: 150,
		value: 70,
		slide: function( event, ui ) {
			$( "#weight_value" ).val( ui.value );
			$(ui.value).val($('#weight_value').val());
		}
	});
	$("#weight_value").keyup(function() {
		$("#weight_slider").slider("value" , $(this).val())
	});
});

＆＃13;

<form name="BMI" method="POST">
  <div id="height_slider"></div>
  <input type="text" name="height" id="height_value" value="175" />
  <br>

  <div id="weight_slider"></div>
  <input type="text" name="weight" id="weight_value" value="70" />
  <br>
  <input type="text" name="bmi_val" id="bmi_val" readonly>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当input被触发时，您可以手动触发slide事件jsFiddle

$( "#height_slider" ).slider({
    range: "max",
    min: 100,
    max: 225,
    value: 175,
    slide: function( event, ui ) {
        $( "#height_value" ).val( ui.value ).trigger('input');
        $(ui.value).val($('#height_value').val());
    }
});