Multiple Spectrum color pickers-CodePudding

I added multiple Spectrum color pickers in a page. Here is my code -

<input type='text' id="custom0" class="spectrum_color_picker"/>
<input type='text' id="custom1" class="spectrum_color_picker"/>
<input type='text' id="custom2" class="spectrum_color_picker"/>
<input type='text' id="custom3" class="spectrum_color_picker"/>
<input type='text' id="custom4" class="spectrum_color_picker"/>
<input type='text' id="custom5" class="spectrum_color_picker"/>
<input type='text' id="custom6" class="spectrum_color_picker"/>
<input type='text' id="custom7" class="spectrum_color_picker"/>

<script>

$('.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) 
    {
        alert(color.toHexString());
        
        
    }
});});

</script>

In change Event I want to set the HEX color code as value of the relavent element for example set custom0 value to #1a1a1a as color was picked for custom0. Could anyone please help?

Spectrum documentation https://bgrins.github.io/spectrum/

Thank you.

CodePudding user response：

You can still use your loop, no need to set it for each color picker individually. I would probably use data-attributes as in the example below (contains how to get id and data-element values)

$('.spectrum_color_picker').each(function(){ 

    let _this = $(this);

    _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) 
    {
        alert(`change element based on id: ${_this.attr('id')} to color: ${color.toHexString()}
        or change element based on data attribute: ${_this.data('element')} to color: ${color.toHexString()}
        `)
    }
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css" integrity="sha512-KuSX 43gVS5MEIJD2ewtrFPOHqC1PJnL8o2f5ciggPC0JUZ8XV0QXlfArO1mSzKkVFdRjsBDfrTU96C5SuRfqQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js" integrity="sha512-1aNp9qKP hKU/VJwCtYqJP9tdZWbMDN5pEEXXoXT0pTAxZq1HHZhNBR/dtTNSrHO4U1FsFGGILbqG1O9nl8Mdg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<input type='text' data-element="element-1" id="custom0" class="spectrum_color_picker"/>
<input type='text' data-element="element-2" id="custom1" class="spectrum_color_picker"/>
<input type='text' data-element="element-3" id="custom2" class="spectrum_color_picker"/>
<input type='text' data-element="element-4" id="custom3" class="spectrum_color_picker"/>
<input type='text' data-element="element-5" id="custom4" class="spectrum_color_picker"/>
<input type='text' data-element="element-6" id="custom5" class="spectrum_color_picker"/>
<input type='text' data-element="element-7" id="custom6" class="spectrum_color_picker"/>
<input type='text' data-element="element-8" id="custom7" class="spectrum_color_picker"/>