每个表单字段的Javascript百分比计算

时间：2017-07-13 10:41:58

标签： javascript jquery html

我正在尝试计算表单中每个字段的百分比值。但是，我当前的代码只计算第一个字段的值或任何一个字段的值。

我希望它只对相同字段集中的字段的百分比值

当前代码有效但我想申请多个字段集而不会干扰同一页面上的其他输入

在代码段中，您可以看到两个单独的金额正在编辑彼此的详细信息

function percentageCal() {

  var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
    $percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
    $currency = $(".form-item__input-expand .currency").on("focus", removePercent),
    $none = $(".form-item--charges .no-charge").on("focus", removePercent),
    $increase = $(".wrapper-types__percentage-value"),
    $increaseWrap = $(".wrapper-types__percentage");

  $($percentage).add($currency).keypress(function(event) {
    if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
      return false;
    }
  });

  function calculatePrice() {
    var percentage = parseFloat($(this).val());
    var price = parseFloat($price.val());
    var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
    var newPrice = price + calcPrice;

    $increase.text(newPrice);
    $increaseWrap.fadeIn();
    if (isNaN(newPrice)) {
      $increaseWrap.hide();
    }
  }

  function calculatePerc() {
    var percentage = $percentage.val();
    var price = parseFloat($(this).val());
    var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
    var newPrice = price + calcPerc;
    $increase.text(newPrice);
  }

  function removePercent() {
    $increaseWrap.fadeOut();
  }
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">

  <legend class="sr-only">Investment 1</legend>

  <div class="form-item form-item--required form-item--invamt">
    <label class="form-item__label" for="wrappers[0]">Investment amount</label>
    <div class="form-item__input-labelled">
      <span class="form-item__input-label">&pound;</span>
      <input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
    </div>
  </div>
  <div class="form-item form-item--charges-wrap">
    <span class="form-item__label">Charges</span>
    <div class="form-item form-item--charges">
      <label class="form-item__input-label-expand" for="percentage1">&#37;</label>
      <div class="form-item__input-expand">
        <input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
      </div>
    </div>
  </div>

  <div class="form-item form-item--charges-wrap">
    <span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
  </div>
  <div class="form-item form-item--action-btns">
    <a href="#" class="button button--icon button--delete" title="Remove investment"></a>
    <a href="#" class="button button--icon button--add" title="Add investment"></a>
  </div>
</fieldset>
<fieldset class="wrapper-types__investment">

  <legend class="sr-only">Investment 2</legend>

  <div class="form-item form-item--required form-item--invamt">
    <label class="form-item__label" for="wrappers[1]">Investment amount</label>
    <div class="form-item__input-labelled">
      <span class="form-item__input-label">&pound;</span>
      <input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="13005.02" required>
    </div>
  </div>
  <div class="form-item form-item--charges-wrap">
    <span class="form-item__label">Charges</span>

    <div class="form-item form-item--charges">
      <label class="form-item__input-label-expand" for="percentage2">&#37;</label>
      <div class="form-item__input-expand">
        <input class="form-item__input percentage" type="number" name="percentage" id="percentage2">
      </div>
    </div>
  </div>

  <div class="form-item form-item--charges-wrap">
    <span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
  </div>
  <div class="form-item form-item--action-btns">
    <a href="#" class="button button--icon button--delete" title="Remove investment"></a>
    <a href="#" class="button button--icon button--add" title="Add investment"></a>
  </div>

</fieldset>

1 个答案:

答案 0 :(得分：0)

使用类和DOM遍历函数来查找同一字段集中的字段，而不是ID。

＆＃13;
＆＃13; 
function percentageCal() {
  var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
    $percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
    $currency = $(".form-item__input-expand .currency").on("focus", removePercent),
    $none = $(".form-item--charges .no-charge").on("focus", removePercent),
    $increase = $(".wrapper-types__percentage-value"),
    $increaseWrap = $(".wrapper-types__percentage");

  $percentage.add($currency).keypress(function(event) {
    if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
      return false;
    }
  });

  function calculatePrice() {
    var $fieldset = $(this).closest("fieldset");
    var percentage = parseFloat($(this).val());
    var price = parseFloat($fieldset.find(".form-item--invamt .form-item__input").val());
    var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
    var newPrice = price + calcPrice;

    $fieldset.find(".wrapper-types__percentage-value").text(newPrice);
    $fieldset.find(".wrapper-types__percentage").fadeIn();
    if (isNaN(newPrice)) {
      $fieldset.find(".wrapper-types__percentage").hide();
    }
  }

  function calculatePerc() {
    var $fieldset = $(this).closest("fieldset");

    var percentage = $fieldset.find(".form-item__input-expand .percentage").val();
    var price = parseFloat($(this).val());
    var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
    var newPrice = price + calcPerc;
    $fieldset.find(".wrapper-types__percentage-value").text(newPrice);
  }

  function removePercent() {
    var $fieldset = $(this).closest("fieldset");

    $fieldset.find(".wrapper-types__percentage").fadeOut();
  }
}
percentageCal();
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
  <div class="form-item--invamt">
    <div>
      <span class="form-item__input-label">&pound;</span>
      <input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
    </div>
  </div>
  <div class="form-item--charges-wrap">
    <div class="form-item--charges">
      <label class="form-item__input-label-expand" for="percentage">&#37;</label>
      <div class="form-item__input-expand">
        <input class="form-item__input percentage" type="number" name="percentage" id="percentage">
      </div>
    </div>
  </div>
  <div class="form-item--charges-wrap">
    <span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
  </div>
</fieldset>

<fieldset class="wrapper-types__investment">
  <div class="form-item--invamt">
    <div>
      <span class="form-item__input-label">&pound;</span>
      <input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="15000" required>
    </div>
  </div>
  <div class="form-item--charges-wrap">
    <div class="form-item--charges">
      <label class="form-item__input-label-expand" for="percentage1">&#37;</label>
      <div class="form-item__input-expand">
        <input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
      </div>
    </div>
  </div>
  <div class="form-item--charges-wrap">
    <span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
  </div>
</fieldset>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题