onKeyup分别获取多个输入字段的值：Jquery

Question

我有一个输入框，允许用户输入价格，

 <div class = "prc-box"><input type="number" class="form-controle" id="oprc" placeholder="$" name="offerPrice" required="required"></div>

然后我有一个包含多个字段的表单，如下所示，

        <div class ="cash-section" id ="cash-form">
                <div class ="input-group-custom" id = "mon-deposit">
                    <div class = "deposit-input">
                        <label class="control-label">Earnest Money Deposit Amount (0-50%)</label>
                        <input type="number" min="0" max="50" class="form-control1" onkeyup="getPrice(this)" placeholder="0-50%" name="moneyDep" required="required"><span class="input-val moneyDep">$0</span></div>
                </div>
                <div class ="input-group-custom" id = "req-conc">
                    <div class = "req-input">
                        <label class="control-label">Requested Concessions (0-60%)</label>
                        <input type="number" min="0" max="60" class="form-control2" placeholder="0-60%" name="req-conc" required="required"><span class="input-val req-conc">$0</span></div>
                </div>

                <div class ="input-group-custom" id = "sel-credit">
                    <div class = "sel-input">
                        <label class="control-label">Other Seller Credits (0-50%)</label>
                        <input type="number" class="form-control" placeholder="0-50%" name="sel-credit" required="required"><span class="input-val sel-credit">$0</span></div>
                </div>

                <div class ="input-group-custom" id = "insp-period">
                    <div class = "insp-input">
                        <label class="control-label">Inspection Period (0-60)</label>
                        <input type="number" class="form-control" placeholder="0-60" name="insp-period" required="required"><span class="input-val insp-period">days</span></div>
                </div>

                <div class ="input-group-custom" id = "due-section">
                    <div class = "due-input">
                        <label class="control-label">Due Dilligence Review Period (0-60)</label>
                        <input type="number" class="form-control" placeholder="0-60" name="due-section" required="required"><span class="input-val due-section">days</span></div>
                </div>

                <div class ="input-group-custom" id = "days-count">
                    <div class = "days-input">
                        <label class="control-label">Requested # of Days to Closing (0-120)</label>
                        <input type="number" class="form-control" placeholder="0-120" name="days-count" required="required"><span class="input-val days-count">days</span></div>
                </div>
            </div>

假设用户在第一个价格输入框中输入一个值，比如 50000。然后用户在#insp-period 输入框中输入的值是 10。现在我需要计算输入价格的 10%（这里是 50000) 在第一个输入框中，它应该显示在一个 span 类中。

我尝试了以下相同的操作，

function getPrice(price) {

 var offerPrice = jQuery('.form-controle').val();
 var text1 = price.value;
 var result1 = (text1*offerPrice)/100;
 jQuery('.input-val.moneyDep').html(result1);
}

当从单个输入字段调用 onkeyup="getPrice(this)" 时，这可以正常工作。 我怎样才能使它也适用于其他输入字段？我需要分别输入每个文本字段的输入值和每次的初始价格输入值。

我怎样才能做到这一点？

Answer 1

试试这个：

$(function() {  
  $(".input-group-custom input").keyup(function() {
    var offerPrice = $(this).val();
    var text1 = price.value;
    var result1 = (text1*offerPrice)/100;
    $(this).next().html(result1);
  });
});