在 append 方法后将背景颜色应用到 div

Question

我正在尝试创建一个动态颜色 bookmarker 只是为了练习 jQuery，但是，我在使用 append 方法创建一个新的时遇到了问题div 并应用 CSS 背景方法将 div（输入）的文本应用为 individual 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

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 2

删除 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 3

只需使用.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 4

在 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 5

已修复您的代码...请检查 Edited 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

Answer 6

你的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

在 append 方法后将背景颜色应用到 div

Applying background color to div after append method

html

javascript

css

jquery

jquery-events