javascript 使用 JQuery 计算输入字段的简单百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4638847/
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
Simple Percentage Calculation of an Input Field with JQuery
提问by Philip
I'm building a PayPal form that the user enters the amount and after that transfered to paypal,
everything is working fine but i need to add a calculation plugin to do the following,
我正在构建一个 PayPal 表单，用户输入金额，然后转移到 PayPal，
一切正常，但我需要添加一个计算插件来执行以下操作，
If a user enters in the field 10$ (Calculate 10$-2%=8$) and return the result as text inside a span 8$
如果用户在字段中输入 10$（计算 10$-2%=8$）并将结果作为跨度内的文本返回 8$
At the end of the form i have a "(p) paragraph" with a span id "site_commission_box" inside.
I need to show the calculated number inside this span.
在表格的末尾，我有一个“(p) 段落”，里面有一个跨度 ID“site_commission_box”。
我需要在这个跨度内显示计算出的数字。
Which JQuery plugin is good for use on this and how i can use it?
Any good example or tutorial to find out how i can do it?
哪个 JQuery 插件适用于此以及如何使用它？
任何很好的例子或教程来了解我如何做到这一点？
Thanks a lot,
Philip
非常感谢，
菲利普
<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="business" value="[email protected]"/>
<input type="hidden" name="cmd" value="_xclick"/>
<input type="hidden" name="return" value="http://returnpage.url"/>
<input type="hidden" name="cancel_return" value="http://cancelreturnpage.url"/>
<input type="hidden" name="rm" value="2"/>
<input type="hidden" name="currency_code" value="USD"/>
<input type="hidden" name="quantity" value="1"/>
<input type="hidden" name="item_name" value="Item Name"/>
<input type="hidden" name="item_number" value="Item ID"/>
<label>Amount (US$) : </label>
<input type="text" name="amount" id="input_amount" class="text" />
<input type="hidden" name="invoice" value="Post ID"/>
<input type="hidden" name="cbt" value="Make Payment →"/>
<input type="hidden" name="item_number" value="Item ID"/>
<input type="submit" name="submit" value="Confirm & Pay →" class="submit" />
<br/>
<span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal takes $(function() {
// the minimum required value to be entered.
// in this case PayPal takes ##代码##.35 from a
// donation, hence we ask for at least .35
var minimum_value = 1.35;
// cache elements that are used at least twice
var $amount = $("#input_amount"),
$msg = $("#msg"),
$commission = $("#site_commission_box");
// attach handler to input keydown event
$amount.keyup(function(e){
if (e.which == 13) {
return;
}
var amount = parseFloat($amount.val()),
commission = amount*0.02;
if (isNaN(commission) || isNaN(amount)) {
$msg.hide();
$commission.hide();
return;
}
if (amount <= minimum_value) {
$commission.hide();
$msg
.text("PayPal takes ##代码##.35 commission for a $"+amount+" donation.")
.fadeIn();
} else {
$msg.hide();
$commission
.fadeIn()
.find("span")
.text((amount-commission).toFixed(2));
}
});
// attach handler to the form submit event
$('#form_paypal').submit(function() {
// check if there is an amount entered
if ($amount.val() > null) {
// is the amount equal to or higher than the minimum_value?
if ($amount.val() < minimum_value) {
// need more amount
// show more amount error
$msg
.addClass("icon_warning_red")
.text("Please enter an amount and try again.")
.fadeIn();
return false; // prevent the form from submitting
}
else {
// amount is more than minimum_value
// show activity
$msg
.removeClasss("icon_warning_red")
.html('<img src="loader.gif" align="middle" alt="load"/> Transferring to PayPal, please wait...')
.fadeIn();
return true; // submit the form
}
}
else {
// no amount entered at all
// show no amount error;
$msg.addClass("icon_warning_red").fadeIn();
return false; // prevent the form from submitting
}
});
});
.35 commission for a donation.</span>
<span id="msg_noamount" class="icon_warning red" style="display:none;">Please enter an amount and try again.</span>
<span id="msg_activity" style="display:none;"> <img src="loader.gif" align="middle" alt="load"/> Transferring to PayPal, please wait...</span>
<p>-2% of the price it will be <b>$<span class="text_decoration" id="site_commission_box"></span> USD</b>.</p>
</form>
回答by mekwall
Is there a reason you use jQuery()instead of $()?
你有理由使用jQuery()而不是$()吗？
Also, you should really cache your selected elements so you don't have to query the DOM multiple times for the same element.
此外，您应该真正缓存您选择的元素，这样您就不必为同一元素多次查询 DOM。
Here's how I would do it:
这是我将如何做到的：
##代码##You can see a working example here, there you can see the changes I did in the HTML as well.
回答by Simon
You have to add a event-handler for a change event. Everytime if the input value is changed the discount is recalculated. See an example on http://jsfiddle.net/3sXZw/
您必须为更改事件添加事件处理程序。每次更改输入值时，都会重新计算折扣。请参阅http://jsfiddle.net/3sXZw/上的示例
