javascript - 添加删除并动态指示编号
问题描述
所以目前我可以轻松添加和删除多个textarea
但我想做的是给每个特定的编号textarea
这是我的文本区域
你注意到我的默认文本区域是Step 1
但我想做的是,当我点击添加时,它会显示另一个文本区域,上面写着
Step 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>');
});
这是当前的输出
解决方案
为了完成这项工作,您可以在 each中添加一个span
没有内容的元素。然后,您可以创建一个函数,每次添加或删除.label
.block
span
.block
我还强烈建议您克隆元素而不是在 JS 逻辑中添加大量 HTML,因为这违反了关注点分离原则,因为将 JS 与 HTML 联系得太紧密。在您的情况下,这可以通过简单地添加一个额外的类来完成,该类.block
包含textarea
元素。尝试这个:
$('.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>
推荐阅读
- python - 使用多部分端点调用 API
- twilio - 不断抛出错误:需要用户名/密码
- typescript - 具有共享相同属性的三个不同接口的自定义类型保护
- bash - 带有if语句加上变量结果的while循环
- javascript - 在反应网站中存储多语言文本的最佳实践是什么
- node.js - socket.io 广播不适用于 React
- woocommerce - 如何使用 WooCommerce 中的 WooCommerce 订阅将价格添加到“订阅”按钮?
- c# - LINQ 选择中的 C# 子查询
- xcode - 更改文本字段的禁用状态时获取`AttributeGraph:检测到循环`错误
- reduction - 多值模型检查(约简法)