如何使用jquery onchange更改多个输入值

Question

首先输入name="ot_jam['+ number +']"和onchange" otNormal (this.value)",第二个输入是name=" ot_ang ['+ number +']"现在我有了多个输入我想让每个ot_jam都改变ot_jam的值，名字相同，我的问题是当我有多个输入时，我改变了ot_jam的值但我只改变了最后一个名为ot_wang的输入

对不起，我的英语这么差，我还在学习。

这是我的HTML代码

<div class="col-6 text-right mb-2">
<button type="button" class="btn btn-success ti-plus" id="BarisBaru"></button>
</div>
<div class="form-group" id="tableLoop"></div>

这是我的Js代码

<script type="text/javascript">
$(document).ready(function() {
for (baris = 1; baris <= 1; baris++) {
Barisbaru();
}
$('#BarisBaru').click(function(e) {
e.preventDefault();
Barisbaru();
});
});
function otNormal(value) {
let a = 1.5 * (value / 173) * 3000000;
const b = Math.round(a);
const currency = b.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1.");
var number = $("#tableLoop .row .num").length;
$('[name="ot_uang[' + number + ']"]').val(currency);
// var xx = $('[name="ot_jam[' + number + ']"]').val();
// if (xx == 0) {
//     $('[name="ot_uang[' + number + ']"]').val("kosong");
// } else {
//     $('[name="ot_uang[' + number + ']"]').val(currency);
// }

}
function Barisbaru() {
$(document).ready(function() {
$("[data-toggle='tooltip']").tooltip();
});
var number = $("#tableLoop .row .num").length + 1;
var Baris = '<div class="row mb-2">';
Baris += '<div class="num col-6 col-xl-2 my-auto">';
Baris += '<span>OT.<span class="count_slip"></span></span>';
Baris += '</div>';
Baris += '<div class="col-6 col-xl-3">';
Baris += '<input class="form-control" type="number" name="ot_jam[' + number + ']" value="0.0" onchange="otNormal(this.value)">';
Baris += '</div>';
Baris += '<div class="col-6 col-xl-3 my-auto">';
Baris += '<span>Jam => Rp.</span>';
Baris += '</div>';
Baris += '<div class="col-6 col-xl-3">';
Baris += '<input class="form-control" type="text" name="ot_uang[' + number + ']" value="0" readonly>';
Baris += '</div>';
Baris += '<button class="btn btn-sm btn-danger ti-close" data-toggle="tooltip" id="HapusBaris"></button>';
$("#tableLoop").append(Baris);
}
</script>

Answer 1

您只获得最后一个输入的原因是由于"var number"内部otNormal()。它总是通过长度得到最后一个数。您可以通过从otjam元素名称中获取正确的数字。

获取正确的数字示例:

const number = e.target.name.replace(/[^0-9]/g, '');

我稍微重构了一下你的代码，以便以后更容易编辑，并添加了一步一步的注释，以帮助分解每行所做的事情。

Document.ready ()

• 缓存将要使用的元素。(barisDiv和;tableElement)
• 改变点击打开。点击，也把它移出了html
• 将更改事件添加到父表而不是输入
• 移动按钮点击回调退出html

otNormal ()

• 已更改函数以返回更改的值(更改事件现在将更新wong)

BarisBaru ()

• remove document.ready()(此处不需要)

$(document).ready(function() {
Barisbaru();
const barisDiv = $('#BarisBaru');
const tableElement = $('#tableLoop');
//changed older click handler to on
barisDiv.on("click", (e)=>{
e.preventDefault();
Barisbaru();
});
//target any button (old or new) inside the table
tableElement.on("click", "button", (e)=>{
console.log("do tooltip for ", e.target);
});
//target any input inside the table. uAng is readonly so this will only trigger on jam
tableElement.on("change", "input", (e)=>{
const element = e.target; //get the changed input
const value = element.value; //get the value
const number = element.name.replace(/[^0-9]/g, ''); //strip the number from the element name
const uAngInput = $('input[name="ot_uang['+number+']"]'); //get the uAng Input
uAngInput.val(otNormal(value)); //replace the value
});  
});

function otNormal(value) {
let a = 1.5 * (value / 173) * 3000000;
const b = Math.round(a);
return b.toString().replace(/(d)(?=(d{3})+(?!d))/g, "$1.");
}
function Barisbaru() {
var number = $("#tableLoop .row .num").length + 1;
var Baris = '<div class="row mb-2">';
Baris += '<div class="num col-6 col-xl-2 my-auto">';
Baris += '<span>OT.<span class="count_slip"></span></span>';
Baris += '</div>';
Baris += '<div class="col-6 col-xl-3">';
Baris += '<input class="form-control" type="number" name="ot_jam[' + number + ']" value="0.0">';
Baris += '</div>';
Baris += '<div class="col-6 col-xl-3 my-auto">';
Baris += '<span>Jam => Rp.</span>';
Baris += '</div>';
Baris += '<div class="col-6 col-xl-3">';
Baris += '<input class="form-control" type="text" name="ot_uang[' + number + ']" value="0" readonly>';
Baris += '</div>';
Baris += '<button class="btn btn-sm btn-danger ti-close" data-toggle="tooltip" id="HapusBaris">HapusBaris</button>';
$("#tableLoop").append(Baris);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6 text-right mb-2">
<button type="button" class="btn btn-success ti-plus" id="BarisBaru">BarisBaru</button>
</div>
<div class="form-group" id="tableLoop"></div>