每個表單字段的Javascript百分比計算

Question

我正在嘗試計算表單中每個字段的百分比值。 但是，我當前的代碼僅在計算第一個字段或重點關注的那個字段的值。

我希望它的百分比值僅適用於同一字段集中的字段

當前代碼有效，但我想應用於多個字段集，而又不干擾同一頁面上的其他輸入

在代碼段中，您可以看到兩個相互獨立編輯的金額詳細信息

 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> 

Answer 1

代替ID，使用類和DOM遍歷函數在同一字段集中查找字段。

 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(); 

 <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>