Как дать уникальный идентификатор для динамического добавления карт
Я писал код для добавления карты с новым заголовком каждый раз, когда нажимается кнопка, а заголовок динамически предоставляется пользователем. проблема в том, что я не могу заставить функцию работать правильно для более чем одной карты. Я знаю, что проблема в том, что каждая карта имеет один и тот же класс, поэтому новый заголовок будет добавлен к каждой карте. Я также хочу добавить к этим картам разные списки ввода пользователя.
$(".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+'')
})
Это мой код. И спасибо за помощь.
Обратите внимание, что кнопка не может иметь тип флажка developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Ответы 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+'')
})
Вы отвечаете почти правильно, но +"" не нужно, а во-вторых, в дописке нужно переделать "head"+(cardCount+1)+"" на "head'+(cardCount+1)+'
Ваш .find("#head'+(cardCount+1)+'") должен быть .find("#head"+(cardCount+1)). Также $("#mainCard.card").length; должен быть $("#mainCard .card").length;
Рассмотрим следующее.
$(".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));
});
Вы можете вообще пропустить идентификатор головы. Работайте с фрагментом документа, и вы будете работать только с тем, что добавляете.
ПРИМЕЧАНИЕ. приведенный ниже код не тестировался и может нуждаться в некоторой настройке.
$(".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);
});
Просто создайте глобальный идентификатор и увеличивайте его с каждой новой картой. Дайте идентификатору карты префикс плюс увеличенный номер.