如何为动态附加的卡片提供唯一的id

Question

我正在编写一个代码，每次按下按钮时都要添加一个新标题的卡片，标题也是由用户动态提供的。问题是我不能使这个功能在多张卡上正常工作。我知道问题是，每一张卡都有相同的类，因此新的头将被附加到每张卡。我还想为这些卡片添加不同的用户输入列表。

$(".add").click(function(){
let list = $("#userInp").val()
$("#mainCard").append('<div class="card col-xl-3"  ><div class="card-header" id ="head" ></div><div class="card body" ><ul></ul></div></div>')
$("#mainCard").find("#head").append('<button type = "checkbox" class ="form-check-input" id = "checkbox01"></button>'+list+'')
})

这是我的代码。谢谢你的帮助。

Answer 1

可以直接跳过头部id。使用文档片段，您只能处理您要添加的内容。

注意下面的代码是未经测试的，可能需要一些调整。

$(".add").click(function(){
//Create the fragment
let frag = new DocumentFragment();
let list = $("#userInp").val();
//Append the card to the fragment
$(frag).append('<div class="card col-xl-3"><div class="card-header"></div><div class="card body" ><ul></ul></div></div>');
//Add the control to the card-header element
$(frag).find(".card-header").append('<input type="checkbox" class="form-check-input" id="checkbox' + $("#mainCard.card").length + '">'+list+'');
//Finally append the fragment to the main card
$("#mainCard").append(frag);
});

Answer 2

考虑以下内容:

$(".add").click(function() {
var list = $("#userInp").val();
var count = $("#mainCard .card").length + 1;
count = count > 10 ? count : "0" + count;
var card = $("<div>", {
class: "card col-xl-3"
}).appendTo("#mainCard");
$("<div>", {
class: "card-header",
id: "header-" + count
}).appendTo(card);
$("<div>", {
class: "card-body"
}).appendTo(card);
$("<ul>").appendTo($(".card-body", card));
$("<button>", {
type: "checkbox",
class: "form-check-input",
id: "checkbox-" + count
}).appendTo($(".card-header", card));
});

Answer 3

您可以像下面这样检查卡片的现有长度

$(".add").click(function(){
let cardCount=$("#mainCard.card").length;
let list = $("#userInp").val()
$("#mainCard").append('<div class="card col-xl-3"  ><div class="card-header" id ="head"+(cardCount+1) ></div><div class="card body" ><ul></ul></div></div>')
$("#mainCard").find("#head"+(cardCount+1)).append('<button type = "checkbox" class ="form-check-input" id = "checkbox01"></button>'+list+'')
})