首頁猿問添加刪除并動態指示編號

添加刪除并動態指示編號

JavaScript

千萬里不及你 2022-06-09 17:25:34

所以目前我可以輕松添加和刪除多個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>');});這是當前的輸出

查看完整描述

2 回答

慕村9548890

TA貢獻1884條經驗獲得超4個贊

要完成這項工作，您可以在 each中添加一個span沒有內容的元素。然后，您可以創建一個函數，每次添加或刪除.label.blockspan.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();

</div>

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

</div>

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

</div>

反對回復 2022-06-09

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

我刪除了div.block周圍的“添加選項”span并.append在新添加的div.block-container元素上使用，而不是在選項容器底部.before添加下一個。textarea我認為這在語義上讀起來更好一些。

同樣使用字符串插值，我可以插入 + 1 的總數div.block來跟蹤頁面上可見的文本區域的數量。

希望這可以幫助。

$('.add').click(function () {

const numberOfBlocks = $(".block").length;

$(".block-container")

.append(`

<label for="exampleFormControlTextarea1">Step ${numberOfBlocks + 1}</label>

</div>

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

</div>`

);

});

</div>

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

</div>

反對回復 2022-06-09

2 回答
0 關注
127 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

添加刪除并動態指示編號

添加刪除并動態指示編號

2 回答

添加回答