我正在寻找具有相同代码的多个百分比变化计算器.Jquery

Question

我用jquery开发了一个百分比变化计算器。它是工作文件。但问题是，我不能用相同的jquery代码制作多个计算器。现在每个计算器都需要特殊的代码和类。有可能在不添加任何额外代码的情况下实现多个计算器吗？代码笔预览：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>

Answer 1

是的，将每个单独处理，将其包装在容器.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>

Answer 2

您可以尝试以下代码：

对于HTML:

<div class="section">
<input type="text" class="ChangeCalulator From101" value="">
<input type="text" class="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="To101" value="25000">
<input type="text" class="Result101" 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)); 
});