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

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

在上面的代码中，我使用Immediately Invoked Function Expression (IIFE)封装了计数器和基本名称，因此外部代码不会干扰它们。 IIFE返回另一个函数，即调用getNewElement时实际调用的函数。内部函数可以通过closure访问counter，它会创建新元素，为其提供ID，然后递增counter，以便下次调用getNewElement时它将获得一个新名字。

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

每当我在JavaScript中创建一个新元素时，都会创建一个新的唯一ID

1 个答案: