Question

所以我一直有这个问题，当我在javascript中添加一个新的时，我不能增加一个id号码。我已经尝试了几天没有答案的研究，但我越来越近了。

PS。我正在创建一个表格，我可以添加，删除，调整大小，校准或添加称为笔记的文本。检查我的codepen：https://codepen.io/Qbinx/pen/OmObRg?editors=1010

这是我提出的，但它不想增加它！

let getNewElement = (function() {
        for (var i = 0; i < stickerEl.length; i++) {
            stickerEl[i].setAttribute("id", "rect" + i);
        };
    }());

此代码位于另一个创建Note的函数中，您可以在codepen中看到。如果您尝试运行我的codepen并添加一个新注释，您将发现它不会将jscolor函数添加到新注释中，因为它们具有相同的ID。而且我知道它没有增加，因为我已将getElementById设置为（'rect0'）和（'rect1'）。像这样：

 function update(jscolor) {
       document.installByClassName('rect0').style.backgroundColor = "#" + jscolor;
       document.installByClassName('rect1').style.backgroundColor = "#" + jscolor;
}

Answer 1

由于你需要一个新的id，它会递增，你需要一个createNote函数外部的变量来跟踪你已经创建的总笔记。

所以在顶部附近的变量声明中添加：

totalNotes = 0;

然后当您在此行中创建新笔记时：

stickerEl.id = "rect" + totalNotes++;

your updated codepen

Answer 2

您的stickerEl是createNote函数中的变量。使用createNote函数中的变量整数，并使用它来增加新笔记的ID。

var index = 0; // this outside createNote

//Giver dem en class
barEl.classList.add('bar');
stickerEl.classList.add('sticker');
color.classList.add('color');
deleteBtn.classList.add('deleteBtn');
deleteBtnIcon.classList.add('ion-android-delete');
colorIcon.classList.add('ion-android-color-palette');
stickerEl.id = "rect" + index++;

Answer 3

这是jQuery代码，一旦单击按钮就会触发我认为可以解决您的问题

$('.addNoteBtn').click(function(){
    //assign last_sticker to the last sticker that was created
    let last_sticker = $('.sticker').last();
    //get the count of the total number of stickers in the DOM
    let index = $('.sticker').length;
    //create a new sticker after the last one
    last_sticker.after('<div class="sticker"></div>');
    //assign the newly created sticker 'rect + the next index
    last_sticker.next().attr("id", "rect" + index);
});

工作的JSFiddle：https://jsfiddle.net/darkisa/g7vmf4h3/

每次从最后一次增加一个新的id我在javascript中创建一个新的div（元素）

3 个答案: