创建一个新的独特的id每次我创建一个JavaScript中的新元素

Question

所以我有这个问题，每次我创建一个新的元素，我的Jscolor函数在新元素上工作，因为它需要一个唯一的ID。我不知道如何解决这个问题。

我已经尝试过for循环等，并无法弄清楚如何。因为在JS函数中我需要选择一个ID，但是我如何选择一个刚刚创建的ID？

希望有人能帮助我解决这个问题:)

HTML代码：

<p class="half-circle"> 
    <button class="addNoteBtn"> 
     <i class="ion-android-add-circle"></i> 
    </button> 
</p> 

JS代码：

createNote = function(){ 

    var stickerEl = document.createElement('div'), 
     barEl = document.createElement('div'), 
     color = document.createElement('button'), 
     colorIcon = document.createElement('i'), 
     deleteBtn = document.createElement('button'), 
     deleteBtnIcon = document.createElement('i'), 
     moveIcon = document.createElement('i'), 
     colorEl = document.createElement('input'), 
     textareaEl = document.createElement('textarea'); 

    var transformCSSPosition = "translateX(" + Math.random() * 800 + "px) translateY(" + Math.random() * 400 + "px)"; 

    stickerEl.style.transform = transformCSSPosition; 


    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 = "1"; 

    colorEl.classList.add('jscolor'); 
    colorEl.onchange = function(){update(this.jscolor)}; 
    colorEl.value = "cc66ff"; 

    color.onclick = function() {showColorPicker}; 


    // tilføj til: 
    stickerEl.append(barEl); 
    stickerEl.append(color); 
    stickerEl.append(deleteBtn); 
    stickerEl.append(colorEl); 
    stickerEl.appendChild(textareaEl); 
    color.append(colorIcon); 
    deleteBtn.append(deleteBtnIcon); 
    barEl.append(moveIcon); 

    stickerEl.addEventListener('mousedown', onDragStart, false); 

    document.body.appendChild(stickerEl); 

}; 

    createNote(); 

    addNoteBtnEl = document.querySelector('.addNoteBtn'); 
    addNoteBtnEl.addEventListener('click', createNote, false); 

    document.addEventListener('mousemove', onDrag, false); 
    document.addEventListener('mouseup', onDragEnd, false); 

    function update(jscolor) { 
      document.getElementById('1').style.backgroundColor = '#' + jscolor; 
    } 

Answer 1

你可以使用一个基本名称很可能是唯一的然后附加一个计数器，在每个新元素创建后增加计数器：

let getNewElement = (function() { 
 
    const idBase = 'my-unique-id-'; 
 
    let count = 0; 
 
    return function (type = 'div') { 
 
    let el = document.createElement(type); 
 
    el.id = idBase + count; 
 
    count += 1; 
 
    return el; 
 
    } 
 
}()); 
 

 
// create 3 new elements in an array 
 
let newElements = [getNewElement('div'), getNewElement('div'), getNewElement()]; 
 

 
// make the text of the elements the same as the id and 
 
// add them to the document 
 
newElements.forEach(function (el) { 
 
    el.textContent = el.id; 
 
    document.body.appendChild(el); 
 
});

div { 
 
    border: 1px solid #ccc; 
 
    margin: 1em; 
 
    padding: 1em; 
 
}

在上面的代码我使用Immediately Invoked Function Expression (IIFE)来封装计数器和基本名称，以便外的代码不能干扰它们。该IIFE返回另一个函数，这是调用getNewElement时实际调用的函数。内部函数通过closure访问counter，它创建新元素，给它它的id，然后递增counter，所以下次调用getNewElement时，它会得到一个新名称。

这种函数返回另一个函数是可能的，因为JavaScript支持higher-order programming，它简单地说就是说你可以像函数调用中的参数那样传递函数，或者像函数调用中的参数那样传递函数。由于IIFE在代码运行时立即被调用，它将返回分配给getNewElement的内部函数。