JQuery: применение цвета фона для div после метода append

Question

Я пытаюсь создать динамический цвет bookmarker только для практического jquery, однако у меня возникла проблема с использованием метода append для создания нового div и применения css background method применить текст 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

Answer 2

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

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

Answer 4

Ju го использования .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(""); 
 

 
    var addDiv = $('<div/>', { 
 
     text: inVal 
 
    }).css({ 
 
     'background-color': inVal 
 
    }).addClass("color"); 
 
    matDes.append(addDiv); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="material-design"> 
 
</div> 
 
<input type="text" id="materialColorInput" class="colorInput"> 
 
<!-- 
 
Material Design 
 
Red 
 
Blue 
 
Green 
 
Yellow 
 
Purple 
 
Pink 
 
Black 
 
White 
 

 
Material Design Color Combo 
 
Aurora 
 
Space 
 
Jungle 
 
Japan 
 
China 
 

 
Vintage 
 
Red 
 
Blue 
 
Green 
 
Yellow 
 
Purple 
 
Pink 
 
Black 
 
White 
 
-->

Answer 5

Испытано в 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(""); 
    } 
}); 

Answer 6

Фиксированный код ... Пожалуйста, проверьте Отредактированный Pen

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

}) ;

Пожалуйста, проверьте http://codepen.io/anon/pen/jqwvKG?editors=1011