页面加载时默认计算金额为空

Default calculated amount blank on page load

本文关键字：金额 计算 默认 加载      更新时间：2023-09-26

我需要一个解决方案，用我正在使用的滑块来显示计算出的默认数字。默认滑块值设置为"800"。计算出的金额应显示为"99"。然而，直到用户移动滑块，计算出的金额才会显示出来——因此，没有问题。我如何设置它，使其在页面加载时已经具有默认计算量"99"（基于"800"）？

非常感谢！

$(function() {
 $( "#slider-range-max" ).slider({
   range: "100px",
   min: 500,
   max: 1500, 
   value: 800,
   slide: function( event, ui ) {
     $( "#amount" ).val( ui.value ); //ui.value inside the event contains the slider value
     var x=$("#amount").val(); //this way you access slider value anywhere in your code
     var y=1.49;
     var a= Math.round(x*y/12);
     $("#product").html(a); 
   }
 });
   $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<input type="text" id="amount"  style="border:0
; font-size: 40px; color:#f6931f; font-weight:bold;">
<label for="amount"  style="border:0
; font-size: 10px; color:#f6931f; font-weight:bold; "> / per month</label>
</p>
<div id="slider-range-max"></div>
<br/>
style="border:0; font-size: 40px; color:#f6931f; font-weight:bold;">
$<span id="product"></span>
</p>
</body>
</html>

您可以将计算移出一个函数，将默认值移入一个变量，然后执行以下操作：

function calculateResult(value) {
    return Math.round(value * 1.49 / 12);
}
$(function() {
 var defaultValue = 800;
 $("#product").html( calculateResult ( defaultValue ));
 $( "#slider-range-max" ).slider({
   range: "100px",
   min: 500,
   max: 1500, 
   value: defaultValue,
   slide: function( event, ui ) {
     var productValue = calculateResult( ui.value );
     $( "#amount" ).val( ui.value ); //ui.value inside the event contains the slider value
     $("#product").html(productValue); 
   }
 });
   $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
相关文章：