Question

我遇到了一个问题，我无法弄清楚是否将特定功能分配给输入。我创建了一个带有两种不同颜色选项（输入）的颜色选择器。每一个都为不同的div添加颜色。在我创建的内容中，我不明白如何控制哪个输入将颜色分配给外部或内部div。正如你在我的小提琴中看到的那样，我首先输入内部颜色，然后更改外部颜色，反之亦然。

我希望能够控制输入，所以他们将颜色分配给我想要的div。

我做错了什么？

The Spectrum docs

See Fiddle Here

$(".colorpicker").spectrum({
    color: "#FFF",
    showInput: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxSelectionSize: 10,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    change: function(color) {
        var eq =  $(this).index('.colorpicker');
      $('.container').eq(eq).css('background-color', color.toHexString())
    }

内部颜色外面的颜色

如果我选择橙色作为外部颜色，我该如何继续使用并为外部div中的其他div设置该颜色？

Answer 1

在此处查看更新的小提琴angular2 bootstrap with data from ajax call(s)

<div id="control-container">
<label for="outside" class="color-label">Outside Color
    <input type="text" name="outside" class="colorpicker">
  </label>
  <label for="inside" class="color-label" id="inside-color-label">Inside Color
    <input type="text" name="inside" class="colorpicker">
  </label>

</div>

实际上问题出在change事件中，您在其中找到颜色选择器的索引，然后将其分配给容器类的相应索引的背景颜色。

Answer 2

你需要像这样切换你的两个Colorpickers：

<div id="control-container">
    <label for="outside" class="color-label">Outside Color
        <input type="text" name="outside" class="colorpicker">
    </label>  
    <label for="inside" class="color-label" id="inside-color-label">Inside Color
        <input type="text" name="inside" class="colorpicker">
    </label>
</div>

这样，颜色选择器的索引与您要设置背景颜色的.container的索引相匹配。

如何专门为两个输入分配功能

2 个答案: