使用拾色器更改 DIV 颜色

Question

我在这里用头撞墙。这段代码没有理由不工作，但它没有。

我希望用户能够使用 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;">

Answer 1

你的代码中有三个问题。

1(脚本末尾出现>，您应该将其删除。

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

3( 您应该在valueSelected值前面加上#前缀。(应该是var valueSelected = '#' +this.value;(

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

希望这有帮助！

Answer 2

1. 从以下位置导入jscolor.js： http://jscolor.com
2. 根据演示将数据从类名分离到属性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>