カラーピッカーの複数のインスタンス内でのテキスト入力

Question

内部にテキスト入力を持つカラーピッカーのインスタンスを複数作成しようとしています。

コメント付きコードは1つのインスタンスで動作しますが、複数のインスタンスの使用方法がわかりません。ここに私の最善の努力..

https://jsfiddle.net/ogj5ynak/6/

/* 
 
* Text input in multiple instance 
 
*/ 
 
var target = document.querySelectorAll('.colorpicker'); 
 

 
var x = []; 
 

 
for (var i = 0, len = target.length; i < len; i++) { 
 

 
    var picker = new CP(target[i]); 
 

 
    x[i] = document.createElement('input'); 
 
    x[i].type = 'text'; 
 

 
    var control = picker.picker.querySelector('.color-picker-control'); 
 
    control.appendChild(x[i]); 
 

 
    x[i].oncut = pickerUpdate; 
 
    x[i].oninput = pickerUpdate; 
 
    x[i].onkeyup = pickerUpdate; 
 
    x[i].onpaste = pickerUpdate; 
 

 
    picker.on('change', function (color) { 
 
    //x[i].value = '#' + color; 
 
    this.target.value = '#' + color; 
 
    this.target.style.backgroundColor = '#' + color; 
 
    }); 
 

 
    function pickerUpdate() { 
 
    picker.set(this.value); 
 
    picker.picker.value = '#' + this.value; 
 
    } 
 
}

<link href="https://tovic.github.io/color-picker/color-picker.min.css" rel="stylesheet"/> 
 
<script src="https://recently.appifiny.io/content/script/lib.js"></script> 
 
<input type="text" class="colorpicker"> 
 
<input type="text" class="colorpicker"> 
 
<input type="text" class="colorpicker"> 
 
<input type="text" class="colorpicker"> 
 
<input type="text" class="colorpicker">

Answer 1

はあなたの問題はchangeイベントにiの範囲であるのです。

あなたは、インデックスの保存問題を解決することができます：

picker.myprop = i; 

を、保存されたインデックスを取得：

picker.on('change', function (color) { 

    var i = this.myprop; // HERE ! 

    x[i].value = '#' + color; 
    this.target.value = '#' + color; 

    this.target.style.backgroundColor = '#' + color; 
    //app.settings[this.target.getAttribute('name')] = color; 
}); 

Try it on JSFiddle