Question

我正在尝试模拟Etch-a-Sketch，我想让用户使用 [type = color] 输入更改方块颜色。直到现在我才把它们画成黑色...

我已经尝试将一个变量赋值给从表单中获取的颜色十六进制代码，并使用该值作为类名创建唯一的类，这似乎没问题，但是后来我无法编辑该类的css“background-value”，因为从我读过的内容来看，你无法编辑变量'css。

感谢任何帮助。

悬停颜色应用javascript部分如下：

//apply hover effect
    $(document).on("mouseenter", ".gridSlot", function() {
        var color = document.getElementById("myColor").value; //myColor = input
        $(this).addClass(color); //what I want to do
        $(this).addClass("color"); //what I'm doing
    });

.color是一个具有固定背景色的类，如果我使用$(".color").css("background-color")更改它，它将更改新旧方块颜色。

有没有办法让已经徘徊的人变成黑色，并画出新的红色？

JSFiddle：https://jsfiddle.net/0g3c6c0v/1/

Answer 1

只需使用.css参考jQuery.css 为其添加一个不存在的类名，以检查该方块是否已被绘制。

$(document).on("mouseenter", ".gridSlot", function() {

    var color = document.getElementById("myColor").value;

    if(!$(this).hasClass("painted")){

      $(this).css("background-color",color);
      $(this).addClass("painted");

    }

});

Updated Fiddle

Answer 2

这可能是使用全局变量的好地方。在JS添加行的顶部，如下所示：{"message": {"webpagefileID":"10", "webpageID":"38", "webpagefileName":"New file", "webpagefileShowInRelatedFiles" :"1", .......continues.....

然后在您的函数中使用：window.color_picker = "#000000";

颜色选择器改变的任何时候你都需要一个更新全局的js函数： $(this).css("background-color",window.color_picker);

使用变量作为类名并进行编辑

2 个答案: