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

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

修正了您的代码...请查看已编辑的笔

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＆amp;不是backgound-color。 backColor也是一个变量＆amp;它不是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

Jquery：在追加方法

6 个答案: