添加方法后背景颜色在div中的应用

Question

我试图创建一个动态的彩色书签，只是为了实践jQuery，但是，我遇到了一个问题，使用追加方法创建一个新的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

在你的密码里有错误

 $(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

        });        
    }
});

用于演示的小提琴

Answer 2

addBackColor是keypress事件的本地函数，您必须将它移出keypress事件之外。

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);
  }
});

Answer 3

删除color值的引号

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);
        });        
    }
});