javascript - 在 append 方法之后将背景颜色应用于 div

Question

我正在尝试创建一个动态颜色 书签 只是为了练习 jQuery，但是，我在使用 append 方法制作新的 div 并应用 CSS 背景方法来应用时遇到了问题div(输入)的文本作为单个 div 的颜色。我的问题是没有应用背景颜色。我不太确定我做错了什么或者为什么我的 .css() 方法不起作用。

var colorIn = $("#materialColorInput");
var matDes = $(".material-design");

colorIn.keypress(function (event) {
  if (event.which === 13) {
    var inVal = colorIn.val();
    var color = $(".color");
    colorIn.val("");
    function addBackColor() { 
        $("this").css('background-color', $(this).text())
    };
    var addDiv = $('<div onload="addBackColor()">' +inVal+ '</div>').addClass("color");
    matDes.append(addDiv);
  }
});

我还为它做了一支笔: http://codepen.io/Aricha03/pen/KzqXmr

Answer 1

你的codepen有错字

 $(this).css('backgound-color', 'backColor');

它应该是 background-color 而不是 backgound-color 。 backColor 也是一个变量，它不是 string

var colorIn = $("#materialColorInput");
var matDes = $(".material-design");

colorIn.keypress(function(event){
    if(event.which ===13){
        var newDiv = colorIn.val();
        colorIn.val("");
        matDes.append('<div class="color">' + newDiv + '</div>');
        var color = $(".color");
            console.log(color);
        color.each(function(){
            var backColor = $(this).text();
                    console.log(backColor);
            $(this).css('background-color', backColor); // I changed here

        });        
    }
});

jsfiddle for demo