Question

我需要一个解决方案，用我正在使用的滑块显示计算出的默认数字。默认滑块值设置为“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>

Answer 1

您可以将计算移动到函数中，将默认值移动到变量中，然后执行以下操作：

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

});

页面加载时默认计算量为空白

1 个答案: