多个Spectrum取色器change事件如何将HEX值赋值给对应输入框

解决方案 #

你只需要修改change事件的回调逻辑即可，Spectrum的change回调中，this默认指向当前触发事件的对应input元素，直接给元素赋值选中的HEX颜色值即可。
修改后的完整JS代码如下：

$('.spectrum_color_picker').each(function(){ 
    $(this).spectrum({
        preferredFormat: "hex",
        allowEmpty:true,
        showInitial: true,
        showInput: true,
        showPalette: true,
        color: '#000000',
        chooseText: "Choose",
        cancelText: "Cancel",
        hideAfterPaletteSelect:true,
        palette: [
            ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
            ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
            ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
            ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
            ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
            ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
            ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
            ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
        ],
        change: function(color) 
        {
            // 给当前触发事件的input元素赋值，空值判断兼容allowEmpty配置
            this.value = color ? color.toHexString() : '';
        }
    });
});

内容的提问来源于stack exchange，提问作者Roy