gpt4 book ai didi

javascript - 如何对 jQuery 动态文本框的项目进行编号

转载 作者:行者123 更新时间:2023-12-02 22:45:40 26 4
gpt4 key购买 nike

我正在制作一个动态文本框表单。这是代码:

$(document).ready(function() {
counter = 1;
}).on('click', '.btn-add', function(e) {
e.preventDefault();
counter = counter + 1;

var controlForm = $('.controls'),
currentEntry = $(this).parents('.entry:last'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);

newEntry.find('input').val('');
controlForm.find('.entry:not(:first) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('text-success').addClass('text-danger')
.html('-');
currentEntry.find('.input-box')
.attr('name', 'subject')
.attr('placeholder', 'Materia ' + String(counter));
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:last').remove();
counter = counter - 1
$(this).parents('.entry').each(function() {
$(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
})

e.preventDefault();
return false;
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
<div class="form-row entry">
<div class="form-inline mb-3">
<a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
<input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
</div>
<div class="col">
<select class="custom-select mb-3" required multiple size="3" name="classes">
<option disabled>Seleziona una o più classi</option>
<option>2DM</option>
<option>2AM</option>
<option>2DM</option>
<option>2AM</option>
</select>
</div>
</div>
</div>

如何为每个文本框提供一个动态数字,并在单击加号按钮时直接在第一个主文本框下方添加新文本框?

最佳答案

使用prepentTo而不是appendTo

$(document).ready(function() {
counter = 1;
}).on('click', '.btn-add', function(e) {
e.preventDefault();
counter = counter + 1;

var controlForm = $('.controls'),
currentEntry = $(this).parents('.entry:last'),
newEntry = $(currentEntry.clone()).prependTo(controlForm);

newEntry.find('input').val('');
controlForm.find('.entry:not(:first) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('text-success').addClass('text-danger')
.html('-');
currentEntry.find('.input-box')
.attr('name', 'subject')
.attr('placeholder', 'Materia ' + String(counter));
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:last').remove();
counter = counter - 1
$(this).parents('.entry').each(function() {
$(this).parents('.entry:last').attr('placeholder', 'Materia ' + String(counter));
})

e.preventDefault();
return false;
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="type-elements" class="controls">
<div class="form-row entry">
<div class="form-inline mb-3">
<a role="button" class="btn btn-link text-success btn-add mr-1" href="">+</a>
<input type="text" class="form-control mr-1 input-box" placeholder="Materia 1" required name="subject">
</div>
<div class="col">
<select class="custom-select mb-3" required multiple size="3" name="classes">
<option disabled>Seleziona una o più classi</option>
<option>2DM</option>
<option>2AM</option>
<option>2DM</option>
<option>2AM</option>
</select>
</div>
</div>
</div>

关于javascript - 如何对 jQuery 动态文本框的项目进行编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58411531/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com