javascript - 如何在 Bootstrap 插件中以货币格式显示输入字段中的数字？

Question

我正在处理小型网络表单，我需要在文本字段中显示数字作为 Bootstrap 附加插件中的货币格式。

我能够使用 jQuery 选择器为单个字段实现(我是 Javascript 世界的新手)，我想为大约 10 个字段做同样的事情。

我认为一定要有优雅的解决方案，而不是每个领域都写一样。

请帮助我。

我的 HTML 代码:

<div class="control-group">
    <label class="control-label">Loan Amount 1</label>
    <div class="controls">
        <div class="input-append">
            <input class="span2" id="loanAmount1" type="text">
            <span class="add-on" id="loanAmount1Cur">$</span>
        </div>
    </div>
</div>
<div class="control-group">
    <label class="control-label">Loan Amount 2</label>
    <div class="controls">
        <div class="input-append">
            <input class="span2" name="loanAmount2" type="text">
            <span class="add-on" name="LoanAmount2Cur">$</span>
        </div>
    </div>
</div>

我的 JS 代码:

$(document).ready(function () {
        $("#loanAmount1").on("keyup", null, function () {
            var input = $("#loanAmount1").val();
            var num = parseFloat(input).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') + " $";
            $("#loanAmount1Cur").html(num);
        });
    });

我的 JSFiddle:http://jsfiddle.net/kiranm516/me52djL8/24/

我从(感谢他们)复制了上面的代码:Add comma to numbers every three digits

Answer 1

为您的输入分配一个类，然后将 keyup 事件绑定(bind)到您的类，而不是 ID。

fork 你的 JSFiddle:http://jsfiddle.net/zmbh4o2u/

JS:

$(document).ready(function () {
    $(".loan-input").on("keyup", null, function () {
        var $input = $(this),
            value = $input.val(),
            num = parseFloat(value).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');

        $input.siblings('.add-on').text('$' + num);
    });
});

有用的提示:

1. 在 keyup 事件的处理函数中，您可以使用 this 访问触发事件的元素。由于您将多次需要该元素，因此通常将 jQuery 对象缓存在本地变量中，因此 var $input = $(this)。
2. 在 JavaScript 中声明多个变量时，最好将它们链接到单个 var 语句中。您可以用逗号分隔您的声明，并使用换行符以提高易读性。