変数をクラス名として使用して編集する

Question

私はEtch-a-Sketchをシミュレートしようとしており、[type = color]入力を使用してユーザーに四角形の色を変更させたいと考えています。これまでは黒だけを描いていました...

フォームから取得した色の16進コードに変数を代入し、その値をクラス名として使用してみましたが、これは大丈夫ですが、私が読んだことから、変数の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：リファレンスjQuery.css は、正方形がすでに描かれているかどうかを確認するためにそれに非既存のクラス名を追加の.css https://jsfiddle.net/0g3c6c0v/1/

Answer 1

単純に使用しています。

$(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機能が必要になりますカラーピッカーの変更その$(this).css("background-color",window.color_picker);

： $('#myColor').on("change", function() { window.color_picker = $('#myColor').val(); });

window.color_picker = "#000000";

そして、あなたの関数では、単に使用：あなたのJSの上部には、このような行を追加します