我正在尋找具有相同代碼的多個百分比變化計算器。jQuery

我用 jquery 開發了一個百分比變化計算器。它是作業檔案。但問題是，我不能用相同的 jquery 代碼制作多個計算器。現在每個計算器都需要特殊的代碼和類別。是否可以在不添加任何額外代碼的情況下進行多重計算器？Codepen 預覽：https ://codepen.io/toolsim/pen/ZEoYbgY 。請幫我...

$(document).on("change keyup blur live", ".ChangeCalulator", function() { // For:- = Topper To Current %
  ///////////////////
  var first = Number($('.From101').val()); // = Topper Price
  var second = Number($('.To101').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $('.Result101').val(Number(multiply).toFixed(2)); // = Topper to Current %
  ///////////////////////
  var first = Number($('.From102').val()); // = Topper Price
  var second = Number($('.To102').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $('.Result102').val(Number(multiply).toFixed(2)); // = Topper to Current %
});
/////////////////////////

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" class="ChangeCalulator From101" value="">
<input type="text" class="To101" value="25000">
<input type="text" class="Result101" value="">
<br><br>
<input type="text" class="ChangeCalulator From102" value="">
<input type="text" class="To102" value="25000">
<input type="text" class="Result102" value="">
<br><br>

uj5u.com熱心網友回復：

是的，單獨對待每一個，把它包在一個容器里.section。在每個必需的輸入上使用事件處理程式，使用input事件，然后通過查找父元素，您可以在同一“行”中找到其他元素。

var func_change = function() {
  var input = this;
  var parent = this.closest(".section")

  var first = Number(parent.querySelector('.From101').value);
  var second = Number(parent.querySelector('.To101').value);
  var minus = second - first;
  var divide = (minus / first);
  var multiply = divide * 100;
  parent.querySelector('.Result101').value = (Number(multiply).toFixed(2));

};

document.querySelectorAll(".ChangeCalulator").forEach(function(elem) {
  elem.addEventListener("input", func_change);
});

// trigger "remotely"
func_change.call (document.querySelector('.From101'))

<div class="section">
  <input type="text" class="ChangeCalulator From101" value="">
  <input type="text" class="ChangeCalulator To101" value="25000">
  <input type="text" class="Result101" value="">
</div>
<br>
<div class="section">
  <input type="text" class="ChangeCalulator From101" value="">
  <input type="text" class="ChangeCalulator To101" value="25000">
  <input type="text" class="Result101" value="">
</div>

uj5u.com熱心網友回復：

您可以嘗試以下代碼：

對于 HTML：

<div class="section">
  <input type="text"  value="">
  <input type="text"  value="25000">
  <input type="text"  value="">
</div>
<br>
<div >
  <input type="text"  value="">
  <input type="text"  value="25000">
  <input type="text"  value="">
</div>

對于jQuery：

$(document).on("change keyup blur live", ".ChangeCalulator", function() {// For:- = Topper To Current %
  let formContainer = $(this).closest('.section')

  var first = Number($(formContainer).find('.From101').val()); // = Topper Price
  var second = Number($(formContainer).find('.To101').val()); // = Current Price
  var minus = second - first; // 2000 - 1000 = {1000 = minus}
  var divide = (minus / first); // 1000 / 1000 = 1
  var multiply = divide * 100; // 1 * 100 = 100%
  $(formContainer).find('.Result101').val(Number(multiply).toFixed(2)); 

});

標籤：javascript jQuery 阿贾克斯 jQuery-ui

上一篇：如何與MVC中的HttpPost方法保持在同一頁面上？

下一篇：在我的專案中獲取實時結果的Jquery/javascript錯誤