使用拾色器更改 DIV 颜色答案

【问题标题】：Change DIV Color Using Color Picker使用拾色器更改 DIV 颜色
【发布时间】：2017-05-24 11:52:12
【问题描述】：

我在这里用头撞墙。这段代码没有理由不工作，但事实并非如此。

我希望用户能够使用 jscolor 选择颜色（我不想使用 type="color"，因为它可能不适用于我的某些用户）。一旦他们选择了一种颜色，就需要更改 div background-color。

当我在输入中使用type="color" 时，它可以工作。但它不适用于 jscolor 脚本。

我的代码：

Javascript：

<script type='text/javascript'>
    $(window).load(function () {
        $('#bgcolor').on('change', function (e) {
            var optionSelected = $("option:selected", this);
            var valueSelected = this.value;
            $(".background").css("background-color", valueSelected);
        });
    });
</script>

HTML：（输入）

<input style="width:100px;" class="jscolor {width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" id="bgcolor" name="bgcolor" value="2e2e2e" />

HTML：（应该更改的 div）

 <div id="background" class="background" style="position: absolute; 
       background-color: #2e2e2e; width: 247px; height: 335px; 
       overflow: scroll; overflow-x: hidden;">

【问题讨论】：

标签： javascript jquery html css jscolor

【解决方案1】：

您的代码中有三个问题。

1) > 出现在您应该删除的脚本末尾。

2) 您正在尝试使用类选择器来选择您的 background div，您应该使用 ID 选择器作为 $("#background")

3) 你应该在你的 valueSelected 值前面加上一个 # 前缀。（应该是var valueSelected = '#' +this.value;）

工作演示： https://jsfiddle.net/7g7Lh2L2/2/

希望这会有所帮助！

【讨论】：

非常感谢。我什至没有看到> 大声笑。只是厌倦了把它弄乱而忽略了它。现在效果很好。

【解决方案2】：

从http://jscolor.com 导入jscolor.js
根据演示将数据从类名分离到属性data-jscolor。

代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jscolor.js"></script>
<script>
    $(document).ready(function(){

        $('#bgcolor').on('change', function (e) {

            var optionSelected = $("option:selected", this);
            var valueSelected = this.value;
            $(".background").css("background-color", valueSelected);
        });
    });
</script>
<input style="width:100px;" class="jscolor" data-jscolor="{width:243, height:150, position:'right',
borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#666'}" id="bgcolor" name="bgcolor" value="2e2e2e" />

<div id="background" class="background" style="position: absolute; background-color: #2e2e2e; width: 247px; height: 335px; overflow: scroll; overflow-x: hidden;"></div>

【讨论】：