以下是onclick的有效代码段。当您移动滑块时，单击“计算”，它将执行我希望的计算。
我希望计算器能够实时生成，而不是单击“计算”。
我尝试过：
$('#calc').keyup(function() {
和
$('#calc').onmouseover(function() {
很确定我在这里遗漏了一些明显的东西。有人能让我摆脱痛苦吗？ ：-）
var slider = document.getElementById("a");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
$(document).ready(function() {
$('#calc').on('click', function() {
var amount = 0.225;
var HowMany = $('#a').val();
if (HowMany > 500)
amount = 0.1883;
if (HowMany > 700)
amount = 0.1483;
if (HowMany > 1000)
amount = 0.125;
$('#total').val(calc(HowMany, amount).toFixed(2));
});
function calc(h, m) {
return (h * m);
};
}); .slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<p>Value: <span id="demo"></span></p>
<div class="slidecontainer">
<input type="range" min="500" max="3000" value="500" step="100" class="slider" id="a">
</div>
Answer: <input type="text" id="total" size=5 maxlength=40>
<input type="button" value="Calculate" id="calc">
答案 0 :(得分：0)
使用input event。
基本上，将其替换：
$('#calc').on('click', function() {
与此：
$('#a').on('input', function () {
应该没事的。
答案 1 :(得分：0)
我只会在“滑块”上使用“更改”事件。然后，您的值在记录了更改后就会发生变化（在这种情况下，是在拖动拇指后向上滑动鼠标）。
我在代码中添加了一些注释，以记录我所做的一些更改以及替代方法。
// I find it's best to use jQuery for everything or nothing.
// In this case, I've moved the code that was here into the
// jQuery below.
$(document).ready(function() {
var slider = $("#a");
var output = $("#demo");
output.html(slider.val());
slider.on('input', function() {
output.html(this.value);
});
// you could use 'input' here as well, but if the calculation
// is actually more complicated, it's best not to do it "live".
slider.on('change', function() {
var amount = 0.225;
var HowMany = $('#a').val();
if (HowMany > 500)
amount = 0.1883;
if (HowMany > 700)
amount = 0.1483;
if (HowMany > 1000)
amount = 0.125;
$('#total').val(calc(HowMany, amount).toFixed(2));
});
function calc(h, m) {
return (h * m);
};
});.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<p>Value: <span id="demo"></span></p>
<div class="slidecontainer">
<input type="range" min="500" max="3000" value="500" step="100" class="slider" id="a">
</div>
Answer: <input type="text" id="total" size=5 maxlength=40>
<input type="button" value="Calculate" id="calc">
答案 2 :(得分：0)
您在按钮click事件中而不是其他任何地方编写了计算代码。您可以在滑块oninput处理程序中调用此事件处理程序：
var slider = document.getElementById("a");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
$('#calc').click();
}
$(document).ready(function() {
$('#calc').on('click', function() {
var amount = 0.225;
var HowMany = $('#a').val();
if (HowMany > 500)
amount = 0.1883;
if (HowMany > 700)
amount = 0.1483;
if (HowMany > 1000)
amount = 0.125;
$('#total').val(calc(HowMany, amount).toFixed(2));
});
function calc(h, m) {
return (h * m);
};
});.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<p>Value: <span id="demo"></span></p>
<div class="slidecontainer">
<input type="range" min="500" max="3000" value="500" step="100" class="slider" id="a">
</div>
Answer: <input type="text" id="total" size=5 maxlength=40>
<input type="button" value="Calculate" id="calc">