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

Posted 2023-02-25

【中文标题】如何专门为两个输入分配不同的功能

【英文标题】：How to specifically assign function differently to two inputs

【发布时间】：2016-08-01 19:46:49

【问题描述】：

我遇到了一个关于为输入分配特定功能的问题。我创建了一个具有两种不同颜色选项（输入）的颜色选择器。每个都为不同的 div 添加颜色。在我创建的内容中，我不明白如何控制哪个输入将颜色分配给外部或内部 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 使用和设置该颜色？

【参考方案1】：

在此处查看更新的小提琴https://jsfiddle.net/way4LmbL/12/

<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>

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

【讨论】：

是的，我原来是这样的，但是由于设置了外部颜色时，内部和外部颜色最初都发生了变化，所以改变了它。

那是因为在 css 背景属性中继承父值我的意思是 css 规则，这就是为什么外部 div 颜色也将颜色设置为内部 div，如果你不想要，那么你必须改变div 结构并尝试使用 position 属性为您的页面提供相同的外观

这方面还有吗？我要做的是将其他子 div 添加到外部 div。然后我想为这些其他 div 分配我选择的一种颜色。有关示例，请参阅我更新的问题。

【参考方案2】：

你只需要像这样切换你的两个颜色选择器：

<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的索引匹配。

【讨论】：

是的，我原来是这样的，但是由于设置了外部颜色时，内部和外部颜色最初都发生了变化，所以改变了它。