Question

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

我希望用户能够使用jscolor选择颜色（我不想使用REFRESH TABLE，因为它可能对我的某些用户不起作用）。选择颜色后，需要更改type="color" div。

当我在输入中使用background-color时，它可以正常工作。但它不适用于jscolor脚本。

我的代码：

的Javascript ：

type="color"

HTML :(输入）

<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 :(应该更改的div）

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

Answer 1

您的代码中有三个问题。

1）>将出现在您应删除的脚本末尾。

2）您正在尝试使用班级选择器来选择background div，您应该将ID选择器用作$("#background")

3）您应在#前面加valueSelected前缀var valueSelected = '#' +this.value;。（应该是pl <- ggplot(data = DF, aes(x = x, y = y)) + geom_point() + scale_y_continuous(labels = function(x) format(x, nsmall = 1))）

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

希望这有帮助！

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

使用拾色器更改DIV颜色

2 个答案: