gpt4 book ai didi

javascript - 添加删除并动态指示编号

转载 作者:行者123 更新时间:2023-12-01 07:37:30 24 4
gpt4 key购买 nike

所以目前我可以轻松添加和删除多个 textarea

但是我想做的是为每个特定的textarea进行编号

这是我的文本区域

正如您所注意到的,我的默认文本区域是第 1 步

但我想做的是,当我单击“添加”时,它会显示另一个文本区域,上面写着

第 2 步

  <div class="optionBox">
<div class="block">
<div class="form-group">
<label for="exampleFormControlTextarea1">Step 1</label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>

<span class="remove">Remove</span>

</div>
<div class="block"> <span class="add">Add Option</span>

</div>
</div>

我的 JavaScript

 $('.add').click(function () {
$('.block:last').before(' <div class="block"><div class="form-group"><label for="exampleFormControlTextarea1">Step</label><textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea></div><span class="remove">Remove</span></div>');
});

这是当前的输出

enter image description here

最佳答案

要实现此目的,您可以将一个不带任何内容的 span 元素添加到每个 .block 内的 label 中。然后,您可以创建一个函数,每次添加或删除 .block 时,该函数都会根据元素的索引更新该 span 内的数字。

我还强烈建议您克隆元素,而不是在 JS 逻辑中添加大量 HTML,因为这违反了关注点分离原则,因为 JS 与 HTML 联系得太紧密。在您的情况下,只需在包含 textarea 元素的 .block 上添加一个额外的类即可完成此操作。试试这个:

$('.add').click(function() {
let $lastBlock = $('.block.step:last');
let $clone = $lastBlock.clone().insertAfter($lastBlock);
$clone.find('textarea').val('');
updateStepCounts();
});

$('.optionBox').on('click', '.remove', function() {
if ($('.block.step').length > 1) {
$(this).closest('.block').remove();
updateStepCounts();
}
});

let updateStepCounts = () => $('.block label span').text(i => i + 1);
updateStepCounts();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="optionBox">
<div class="block step">
<div class="form-group">
<label for="exampleFormControlTextarea1">Step <span></span></label>
<textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
<span class="remove">Remove</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>

关于javascript - 添加删除并动态指示编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60988889/

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