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

我试图模拟Etch-a-Sketch，并且我想让用户使用[type = color]输入更改正方形颜色。到目前为止，我只是把它们画成黑色......使用变量作为类名并对其进行编辑

我试着将一个变量分配给从窗体中获得的颜色十六进制代码，并使用该值作为类名创建唯一类，这看起来好，但我不能编辑该类的CSS“背景值”，因为从我读过的，你不能编辑变量的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/

来源

2016-12-06 Diego Mengue

只需使用的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

来源

2016-12-06 14:10:07

这可能是使用全局变量的好地方。在您的JS的顶部添加一行：window.color_picker = "#000000";

，然后在功能只需使用：$(this).css("background-color",window.color_picker);

任何时候的颜色选择器的变化，你需要一个js函数，用于更新全球： $('#myColor').on("change", function() { window.color_picker = $('#myColor').val(); });

来源

2016-12-06 14:16:17

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

回答

相关问题