JavaScript 自己的 div 颜色

Question

我的问题是我创建了便笺，但是每次我创建一个新便笺时，我都可以更改新便笺的颜色，但我可以更改第一个便笺的颜色，然后更改所有便笺的颜色。我想为他们每个人选择一种颜色，这样他们就可以为自己选择一种独特的颜色。这是我的代码笔：https://codepen.io/Qbinx/pen/OmObRg?editors=1010当我创建一个新笔记时，会发生这种情况：

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 transformCSSValue = "translateX(" + Math.random() * 800 + "px) translateY(" + Math.random() * 400 + "px)";
        stickerEl.style.transform = transformCSSValue; 
        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" + totalNotes++;
        colorEl.classList.add('jscolor');
        colorEl.onchange = function(){update(this.jscolor)};
        colorEl.value = "cc66ff";
        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);
    };

那么我该怎么做才能更改每个音符的颜色呢？

Answer 1

好的，我通过描述我为使其工作所做的工作。

• 把jscolor的代码放.js上去，因为完整的解决方案依赖于该库。

• 初始化第 1850 行中的 jscolor 库。

• 修改创建注释方法，从这里

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

  对此

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

  这是专门为在创建新笔记时创建选取器而制作的。

• 从此修改更新方法

  var colorCall = document.getElementsByClassName('sticker');
  var NotesCall = Array.prototype.filter.call(colorCall, 
  function(colorCall){
  return colorCall.style.backgroundColor =  "#" + jscolor;
  

  对此

  var colorCall = document.querySelectorAll(".jscolor-active");
  var NotesCall = Array.prototype.filter.call(colorCall,                 
  function(colorCall){
    return colorCall.parentNode.style.backgroundColor =  "#" + jscolor;
  });
  

  基本上改变它选择要更改颜色的项目的方式。

这是它的代码笔： https://codepen.io/jukanjavir/pen/wdyVGR

希望对您有所帮助。