Javascript 使用JQuery简单计算输入字段的百分比

我正在构建一个PayPal表单，用户输入金额，然后转移到PayPal，
一切正常，但我需要添加一个计算插件来执行以下操作

如果用户在字段10$（计算10$-2%=8$）中输入，并在8$范围内以文本形式返回结果

在表格的末尾，我有一个“（p）段”，里面有一个span id“站点佣金箱”。
我需要显示这个跨度内的计算数字

哪一个JQuery插件适合在上面使用？我如何使用它？
有没有好的例子或教程来了解我是如何做到这一点的

非常感谢，
菲利浦

金额（美元）：


PayPal每捐赠1美元就收取0.35美元的佣金。
请输入金额，然后重试。
正在传送到贝宝，请稍候。。。
-价格的2%为美元

使用

jQuery（）

而不是

$（）

有什么原因吗

此外，您应该真正缓存所选元素，这样就不必多次查询DOM中的同一元素

我会这样做：

$(function() {
    // the minimum required value to be entered.
    // in this case PayPal takes $0.35 from a $1
    // donation, hence we ask for at least $1.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 $0.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"/>&nbsp;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
        }
    });
});

$（函数（）{
//需要输入的最小值。
//在这种情况下，PayPal从1美元中抽取0.35美元
//捐款，因此我们要求至少1.35美元
var最小值=1.35；
//缓存至少使用两次的元素
var$金额=$（“#输入金额”），
$msg=$（“#msg”），
$commission=$（“#站点_commission_box”）；
//将处理程序附加到输入keydown事件
$amount.keyup（功能（e）{
如果（e.which==13）{
返回；
}
var amount=parseFloat（$amount.val（）），
佣金=金额*0.02；
if（伊斯南（佣金）|伊斯南（金额））{
$msg.hide（）；
$commission.hide（）；
返回；
}
如果（金额为空）{
//金额是否等于或高于最小值？
如果（$amount.val（）<最小值）{
//需要更多的钱吗
//显示更多金额错误
$msg
.addClass（“图标警告红色”）
.text（“请输入金额，然后重试。”）
.fadeIn（）；
return false；//防止表单提交
}
否则{
//金额大于最小值
//表演活动
$msg
.removeclass（“图标\警告\红色”）
.html（'正在传送到PayPal，请稍候…'）
.fadeIn（）；
返回true；//提交表单
}
}
否则{
//根本没有输入任何金额
//显示无数量错误；
$msg.addClass（“图标警告红色”）.fadeIn（）；
return false；//防止表单提交
}
});
});

---

您可以看到一个工作示例，您也可以看到我在HTML中所做的更改。

您使用

jQuery（）

而不是

$（）

有什么原因吗

此外，您应该真正缓存所选元素，这样就不必多次查询DOM中的同一元素

我会这样做：

$(function() {
    // the minimum required value to be entered.
    // in this case PayPal takes $0.35 from a $1
    // donation, hence we ask for at least $1.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 $0.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"/>&nbsp;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
        }
    });
});

$（函数（）{
//需要输入的最小值。
//在这种情况下，PayPal从1美元中抽取0.35美元
//捐款，因此我们要求至少1.35美元
var最小值=1.35；
//缓存至少使用两次的元素
var$金额=$（“#输入金额”），
$msg=$（“#msg”），
$commission=$（“#站点_commission_box”）；
//将处理程序附加到输入keydown事件
$amount.keyup（功能（e）{
如果（e.which==13）{
返回；
}
var amount=parseFloat（$amount.val（）），
佣金=金额*0.02；
if（伊斯南（佣金）|伊斯南（金额））{
$msg.hide（）；
$commission.hide（）；
返回；
}
如果（金额为空）{
//金额是否等于或高于最小值？
如果（$amount.val（）<最小值）{
//需要更多的钱吗
//显示更多金额错误
$msg
.addClass（“图标警告红色”）
.text（“请输入金额，然后重试。”）
.fadeIn（）；
return false；//防止表单提交
}
否则{
//金额大于最小值
//表演活动
$msg
.removeclass（“图标\警告\红色”）
.html（'正在传送到PayPal，请稍候…'）
.fadeIn（）；
返回true；//提交表单
}
}
否则{
//根本没有输入任何金额
//显示无数量错误；
$msg.addClass（“图标警告红色”）.fadeIn（）；
return false；//防止表单提交
}
});
});

---

您可以看到一个工作示例，在那里您可以看到我在HTML中所做的更改。

您必须为更改事件添加事件处理程序。每次更改输入值时，都会重新计算折扣。请参见

上的示例，您必须为更改事件添加事件处理程序。每次更改输入值时，都会重新计算折扣。参见

上的一个例子，是我，还是10-2%不是9.80美元？@lonesomeday T'是真实的是我，还是10-2%不是9.80美元？@lonesomeday T'是真实的我还不能在这里投票，但非常感谢，你是非常正确的！对于jQuery（），我这样使用它来防止WordPress中的任何冲突。非常感谢@菲利普：没问题！啊，是的，这就解释了原因。祝捐款好运！我还不能在这里投票，但非常感谢你，你说得很对