JavaScript自己的顏色爲div

-1

我的問題是我有粘性筆記，我創建，但每次我創建一個新的我可以更改新的顏色，但我可以更改顏色的第一個音符然後更改他們的顏色都是。我想爲他們每個人挑選一種顏色，這樣他們就可以爲自己擁有一種獨特的顏色。這是我Codepen： https://codepen.io/Qbinx/pen/OmObRg?editors=1010 這發生在我創建一個新的註釋：JavaScript自己的顏色爲div

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

    };

所以我可以做什麼來改變每個音符的顏色嗎？

來源

2017-05-10 Scripto

好吧，我通過來描述我做了什麼使它工作。

把jscolor.js的代碼加起來，因爲完整的解決方案依賴於該庫。
初始化jscolor的文庫在線路1850

修改createNote方法，從這個

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

改變基本上它選擇項目是顏色改變的方式。

下面是該codepen：https://codepen.io/jukanjavir/pen/wdyVGR

希望它能幫助。

來源

2017-05-10 22:25:44

JavaScript自己的顏色爲div

回答

相關問題