gpt4 book ai didi

javascript - 当用户输入更改时使用 jQuery 更新相同的 html 元素

转载 作者:行者123 更新时间:2023-11-28 04:56:00 25 4
gpt4 key购买 nike

我正在尝试进行一些计算,这些计算接受用户输入并提供计算值供用户查看。用户将提供两个值,然后返回结果 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>

enter image description here

enter image description here

最佳答案

$(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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com