将颜色从光谱设置为另一个 div

Posted 2023-02-25

【中文标题】将颜色从光谱设置为另一个 div

【英文标题】：Setting a color from spectrum to another div

【发布时间】：2016-07-29 15:42:45

【问题描述】：

我很难弄清楚如何将我从光谱中选择的颜色设置为另一个 div。我的 html 是这样的：

<h2>Full Example</h2>
<input type='text' id="full"/>

<div class="outside-preview">

</div>
<div id="inside-preview">

</div>

输入是光谱，它改变了小框的颜色。这是插件的所有标准。我也想为其中一个框（内部预览或外部预览）设置相同的颜色。

有人知道我要做什么吗？

Click to see it in a fiddle

Here is the github page

【参考方案1】：

根据他们的文档，您可以使用change-function：

change: function(color) 
    $('.outside-preview').css('background-color',  color.toHexString())

Example

---

要使用多个颜色选择器为相应的div 设置背景色，您可以使用以下内容：

var eq =  $(this).index('.colorpicker');
$('.container').eq(eq).css('background-color', color.toHexString());

Example

【讨论】：

谢谢！你知道我怎么能有两个不同颜色的输入吗？我尝试添加另一个带有名称的输入，但它没有任何帮助。这个例子没有你的答案，因为我自己想出来了，但你的解决方案更好。 jsfiddle.net/way4LmbL/2

参见this 示例。设置 2 个 colopickers 并选择各自的 div 来设置背景。

明白了！我看到 $("#full").spectrum(` 也阻碍了我。谢谢你的帮助！！

很抱歉不得不再次问您一些问题，但是为什么输入在 div 之外时不起作用？由于未来的定位，我希望输入高于而不是在 div 内。看到这个：jsfiddle.net/way4LmbL/4

@Becky 那是因为dom-traversing 如何与nextAll() 一起工作，对于您的布局，您可以使用类似example 的东西