jquery：两个数字的百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13620439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery: percentage of two numbers
提问by Sergiu Costas
EDITED
已编辑
Thank you for everyone who offered support... the best working script I will share with you in hope that I could help others who is looking for the same solution:
感谢所有提供支持的人......我将与您分享最好的工作脚本，希望我可以帮助正在寻找相同解决方案的其他人：
$(document).ready(function(){
$("#price1, #price2").keyup(function() {
var priceOne = parseFloat($("#price1").val());
var priceTwo = parseFloat($("#price2").val());
var rate = parseFloat($("#rate").val());
if ($("#price1").val() && $("#price2").val()){
$('#rate').val(((priceTwo - priceOne) / priceOne * 100).toFixed(2));
}
});
$("#rate").keyup(function() {
var priceOne = parseFloat($("#price1").val());
var rate = parseFloat($("#rate").val());
if ($("#rate").val() && $("#price1").val() && $("#price2").val()){
$('#price2').val(((priceOne * rate)/ 100 + priceOne).toFixed(2));
}
});
})
Also you can test it following this LINK
您也可以按照此链接进行测试
INITIAL QUESTION:
初始问题：
Please help to calculate the percentage between two numbers. I tried one way, but I did not succeed. Please tell me what is wrong, or I will appreciate if you can recommend other script which could help me
请帮助计算两个数字之间的百分比。我尝试了一种方法，但没有成功。请告诉我出了什么问题，或者如果您能推荐其他可以帮助我的脚本，我将不胜感激
my script:
我的脚本：
<html>
<head>
<script type="text/javascript">
$("#rate").text(function() {
var result = (parseInt(($("#price1").text(), 10) * 100)/ parseInt($("#price2").text(), 10));
if (!isFinite(result)) result = 0;
return result;
});?
</script>
</head>
<body>
<div id="price1"><label><input id="price1" type="text"></label></div>
<div id="price2"><label><input id="price2" type="text"></label></div>
<div id="rate"><label><input id="rate" type="text"></label></div>
</body>
</html>
回答by mattn
use val()instead of text()for input element, use $(function(){})to wait DOM is ready. And also don't use same ID to elements.
使用val()而不是text()用于输入元素，用于$(function(){})等待 DOM 准备就绪。并且也不要对元素使用相同的 ID。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#price1, #price2").change(function() { // input on change
var result = parseFloat(parseInt($("#price1").val(), 10) * 100)/ parseInt($("#price2").val(), 10);
$('#rate').val(result||''); //shows value in "#rate"
})
});
</script>
</head>
<body>
<div id="price-div1"><label>price1</label><input id="price1" type="text"></div>
<div id="price-div2"><label>price2</label><input id="price2" type="text"></div>
<div id="rate-div"><label>rate</label><input id="rate" type="text">%</div>
</body>
</html>
回答by Adil
You have few problems,
你的问题很少，
- ? after closing parenthesis of text function.
- Repeated id price1 and price2 for both div and textboxes
- If you want input from textbox then you should use val() instead of text()
- ? 在文本函数的右括号之后。
- div 和文本框的重复 id price1 和 price2
- 如果你想从文本框输入，那么你应该使用 val() 而不是 text()
Fixed you code
修复了你的代码
HTML
HTML
<div id="dprice1"><label><input id="price1" type="text" value="80" /></label></div>
<div id="dprice2"><label><input id="price2" type="text" value="100" /></label></div>
<div id="drate"><label><input id="rate" type="text"></label></div>
<input id="btnCal" type="button" value="Calculate">
Javascript?
Javascript？
$("#btnCal").click(function() {
$("#rate").val(function() {
var result = parseInt($("#price1").val()) * 100 / parseInt($("#price2").val());
if (!isFinite(result)) result = 0;
return result;
});
});?
回答by RohitWagh
Check this fiddle
检查这个小提琴
Have made some corrections:
做了一些更正：
- removed
?as everyone says. - change
.text()to.val() - both
divandinputhad same id
?正如大家所说的那样删除。- 更改
.text()为.val() - 双方
div并input有相同的ID
回答by Dhamu
Use like this,
像这样使用，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
$("#rate").text(function() {
var result = (parseFloat(($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10));
if (!isFinite(result)) result = 0;
return result;
});
</script>
<body>
<div class="price1"><label><input id="price1" type="text"></label></div>
<div class="price2"><label><input id="price2" type="text"></label></div>
<div class="rate"><label><input id="rate" type="text"></label></div>
</body>
</html>
Changed div class, and get input value by val()
更改了 div 类，并通过以下方式获取输入值 val()
回答by Akhil Sekharan
May be you want to use parseFloat()instead of parseInt()
可能你想使用parseFloat()而不是parseInt()
<div id="price-div1"></label>price1<label><input id="price1" type="text"></div>
<div id="price-div2"></label>price2<label><input id="price2" type="text"></div>
<div id="rate-div"><label>rate</label><input id="rate" type="text">%</div>
<script type="text/javascript">
$(function() {
$("#price1, #price2").change(function() {
var result = parseFloat(parseFloat($("#price1").val(), 10) * 100)/ parseFloat($("#price2").val(), 10);
$('#rate').val(result||'');
})
});
</script>
