Javascript Jquery：在append方法之后将背景色应用于div

我试图创建一个动态颜色书签只是为了练习jquery，但是，我在使用append方法创建一个新div和应用css background方法将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);
  }
});

var colorIn=$（“材料颜色输入”）；
var matDes=$（“材料设计”）；
彩色按键（功能（事件）{
if（event.which==13）{
var inVal=colorIn.val（）；
var color=$（“.color”）；
colorIn.val（“”）；
函数addBackColor（）{
$（“this”）.css（'background-color'，$（this.text（））
};
var addDiv=$（''+inVal+''）.addClass（“颜色”）；
附加材料（addDiv）；
}
});

我还为它做了一支钢笔：

---

addBackColor是按键事件的本地功能，您必须将其移到按键事件之外

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

function addBackColor(element) { 
    $(element).css('background-color', $(element).text())
};

colorIn.keypress(function (event) {
  if (event.which === 13) {
    var inVal = colorIn.val();
    var color = $(".color");
    colorIn.val("");

    var addDiv = $('<div onload="addBackColor(this)">' +inVal+ '</div>').addClass("color");
    matDes.append(addDiv);
  }
});

var colorIn=$（“材料颜色输入”）；
var matDes=$（“材料设计”）；
函数addBackColor（元素）{
$（元素）.css（'background-color'，$（元素）.text（））
};
彩色按键（功能（事件）{
if（event.which==13）{
var inVal=colorIn.val（）；
var color=$（“.color”）；
colorIn.val（“”）；
var addDiv=$（''+inVal+''）.addClass（“颜色”）；
附加材料（addDiv）；
}
});

删除

颜色值的引号

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");
        color.each(function(){
            var backColor = $(this).text();
            $(this).css('background-color', backColor);  //I removed quotes for the backcolor and r missing in background color
                        alert(backColor);
        });        
    }
});

var colorIn=$（“材料颜色输入”）；
var matDes=$（“材料设计”）；
彩色按键（功能（事件）{
if（event.which==13）{
var newDiv=colorIn.val（）；
colorIn.val（“”）；
matDes.append（“”+newDiv+“”）；
var color=$（“.color”）；
color.each（函数（）{
var backColor=$（this.text（）；
$（this.css（'background-color'，backColor）；//我删除了backColor的引号，并且在backColor中缺少r
警报（背景色）；
});        
}
});
只需使用
.css（）
设置样式即可


var colorIn=$（“材料颜色输入”）；
var matDes=$（“材料设计”）；
彩色按键（功能（事件）{
if（event.which==13）{
var inVal=colorIn.val（）；
var color=$（“.color”）；
colorIn.val（“”）；
var addDiv=$（''）{
文本：无效
}).css({
“背景色”：无效
}).addClass（“颜色”）；
附加材料（addDiv）；
}
});

在CodePen中测试

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

colorIn.on('keypress', function(event) {
  if (event.which === 13) {
    var inVal = colorIn.val();
    var color = $(".color");
    var backColor = colorIn.val();
    var addDiv = $('<div>' +inVal+ '</div>').addClass("color").attr('style','background-color: ' + backColor);
    matDes.append(addDiv);
    colorIn.val("");
  }
});

var colorIn=$（“材料颜色输入”）；
var matDes=$（“材料设计”）；
颜色输入on（'keypress'，函数（事件）{
if（event.which==13）{
var inVal=colorIn.val（）；
var color=$（“.color”）；
var backColor=colorIn.val（）；
var addDiv=$（''+inVal+''）.addClass（“颜色”）.attr（'style'，'background-color:'+backColor）；
附加材料（addDiv）；
colorIn.val（“”）；
}
});
修复了您的代码…请检查编辑过的笔

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

colorIn.keypress（功能（事件）{
if（event.which==13）{
var newDiv=colorIn.val（）；
colorIn.val（“”）；
matDes.append（“”+newDiv+“”）；
var color=$（“.color”）；
color.each（函数（）{
var backColor=$（this.text（）；
$（this.css（“背景色”，背景色）；
console.log（背景色）；
});        
}

}))

请检查代码笔中的
是否有输入错误

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

它应该是背景色，而不是背景色。backColor也是一个变量&它不是
字符串

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

        });        
    }
});

var colorIn=$（“材料颜色输入”）；
var matDes=$（“材料设计”）；
彩色按键（功能（事件）{
if（event.which==13）{
var newDiv=colorIn.val（）；
colorIn.val（“”）；
matDes.append（“”+newDiv+“”）；
var color=$（“.color”）；
控制台。日志（颜色）；
color.each（函数（）{
var backColor=$（this.text（）；
console.log（背景色）；
$（this.css（'background-color'，backColor）；//我在这里更改了
});        
}
});

addBackColor
是按键手柄的本地颜色，我也尝试过不使用引号。如果你在我的笔上测试它，它还是不起作用。我需要新创建的div具有十六进制文本的背景色，我也在你的笔中进行了测试。它的工作很好，这就是为什么我把答案贴在这里哦，天哪，我觉得自己像个傻瓜。该死的打字错误。非常感谢，这就解决了这个问题。