我正在动态创建多个元素,并且我想同步特定的元素。我编写这段代码是为了尽可能简单地了解我的问题。
创建输入并附加他的值后,我希望每次都可以编辑它。
因此,如果我创建多个 id input0,1,2 等
的输入并更改特定输入的值,我想在合适的输入中获取该值。我为 1 对编写函数,如何为每对动态创建的输入实现该功能?
$(document).ready(function() {
var a = 0;
$('#add').hide();
$('#generateInput').click(function() {
$('#divArea').append('<input name="input' + a + '">');
$('#generateInput').toggle();
$('#add').toggle();
})
$('#add').click(function() {
$('#divArea').append('<input name="copyInput' + a + '" value="' + $('input[name="input' + a + '"]').val() + '"readonly="readonly"><br />');
$('#add,#generateInput').toggle();
a++;
})
});
//how to make this for all created inputs?
$(document).on('keyup', '[name="input0"]', function() {
$('[name="copyInput0"]').val(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea"></div>
<button id="generateInput">Generate</button>
<button id="add">Add</button>
最佳答案
您可以简单地对您创建的每个输入使用 onkeyup()
并获取该函数内的值。
var a = 0;
$(document).ready(function() {
$('#add').hide();
$('#generateInput').click(function() {
$('#divArea').append('<input onkeyup="onKeyUp(this)" name="input' + a + '" index="' + a + '">');
$('#generateInput').toggle();
$('#add').toggle();
})
$('#add').click(function() {
$('#divArea').append('<input name="copyInput' + a + '" value="' + $('input[name="input' + a + '"]').val() + '"readonly="readonly"><br />');
$('#add,#generateInput').toggle();
a++;
})
});
//how to make this for all created inputs?
function onKeyUp(input) {
$('input[name="copyInput' + $(input).attr('index') + '"]').val(input.value)
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="divArea">
</div>
<button id="generateInput">
Generate
</button>
<button id="add">
Add
</button>
关于javascript - 如何同步每对动态创建的输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58337513/