我正在尝试进行一些计算，这些计算接受用户输入并提供计算值供用户查看。用户将提供两个值，然后返回结果 ADF。
我遇到的两个问题:该值是在我输入第二个值(FG)之前计算的；当任一值更改时，旧的 ADF 不会被替换。我明白这是因为它不断应用 .append()，但我不知道我需要使用什么。我提供了正在发生的事情的图片。我在下面列出了我的代码。
*请注意，round() 和 ADF() 函数是我用于计算的 Javascript 函数，我认为它与列出该代码无关。如果您认为有必要查看它，请告诉我。
预先感谢您的帮助。
function main() {
$(document).on('change', '#Gravities', function () {
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
var calc = round(ADF(OG,FG)*100, 2);
$('.ADFbox').append('<div class="ADF">'+calc+'%</div>');
});
}
$(document).ready(main);<body>
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='text' name='OG' value =""></input></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='text' name='FG' value=""></input></label></p>
</div>
</form>
<div class = 'ADFbox'>
<p>ADF:</p>
</div>
</body>
</html>
最佳答案
$(document).on("input", ".gravity", function() {
var thisval = $(this).val()
var nothisval = $(".gravity").not(this).val()
if (thisval.length > 0 && nothisval.length > 0) {//check if one value is empty
OG = $('input[name=OG]').val();
FG = $('input[name=FG]').val();
//var calc = round(ADF(OG, FG) * 100, 2);
var calc = OG * FG;//change this computation
//$('.ADFbox').append('<div class="ADF">' + calc + '%</div>');
$('.ADFbox').text("ADF:" + calc).change();
} else {
$('.ADFbox').text("ADF: 0");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="Gravities">
<div>
<p><label class="originalGravity">OG: <input type='text' class="gravity"name='OG' value ="" /></label></p>
</div>
<div>
<p><label class="finalGravity">FG: <input type='text' class="gravity" name='FG' value=""/></label></p>
</div>
</form>
<div class='ADFbox'>
<p>ADF:</p>
</div>
</body>检查每个值，如果两个值的长度都大于 0，则继续
注意:输入没有结束标记，只是像 <input /> 那样关闭
关于javascript - 当用户输入更改时使用 jQuery 更新相同的 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42550204/