向虹膜颜色选择器添加更多调色板，而不覆盖当前调色板？答案

【问题标题】：Add more color palettes to iris color picker, without overwriting current palette?向虹膜颜色选择器添加更多调色板，而不覆盖当前调色板？
【发布时间】：2017-01-13 15:37:45
【问题描述】：

我正在使用带有一些预设调色板的虹膜颜色选择器。现在我想添加更多颜色，但是我不想触碰之前的代码。我需要一个解决方案来扩展调色板而不触及原始代码。

我遇到的问题是，如果我再次使用调色板参数，它只会覆盖之前选择的调色板。

jQuery(document).ready(function($){
    $('#color-picker').iris({
        hide: false,
         palettes: ['#125', '#459', '#78b'],
    });

     $('#color-picker').iris({
         palettes: ['#000', '#000', '#000'],
    });
});

这是我的小提琴：http://jsfiddle.net/8ctrmsyx/

我也不能只添加以前的调色板，因为网站上有几十个不同的颜色选择器，每个都有自己的调色板。

最简单的解决方案是以某种方式具有扩展调色板的功能，而不是覆盖它们。

我该怎么做？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

它不适合您，因为您正在覆盖调色板。为了追加到 Iris 实例的预先存在的调色板，您必须首先检索调色板数组，追加/合并到它，然后更新调色板变量。

从 Iris 文档中，您可以retrieve the palette information using the options syntax，即：

var palette = $('#color-picker').iris('option', 'palettes');

检索调色板后，您可以执行array.concat() 将新调色板添加到其中，即：

$('#color-picker').iris('option', 'palettes', palette.concat(['#fff', '#ddd', '#bbb', '#999', '#777', '#555', '#333', '#111']));

这是一个基于您的小提琴的概念验证功能示例：

jQuery(document).ready(function($) {
  $('#color-picker').iris({
    hide: false,
    palettes: ['#125', '#459', '#78b'],
  });

  var palette = $('#color-picker').iris('option', 'palettes');

  // Let's say we want to add three grey scale colors on top of your pre-existing palette
  $('#color-picker').iris('option', 'palettes', palette.concat(['#fff', '#ddd', '#bbb', '#999', '#777', '#555', '#333', '#111']));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://automattic.github.io/Iris/javascripts/iris.min.js"></script>
<input type="text" id="color-picker" value="#bada55" />

我还分叉/更新了你的小提琴，你可以在这里看到它的工作原理：http://jsfiddle.net/teddyrised/8ctrmsyx/1/

【讨论】：