Question

我有一些脚本首先生成一个div，然后将背景设置为随机的十六进制颜色。目前，当它设置div的背景颜色时，它会为该类的所有div设置背景颜色。

如何设置它所创建的div的颜色并让其他人保持不变？

function makeThing(){
    var back = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    var hex = back[Math.floor(Math.random() * back.length)];
    var hex1 = back[Math.floor(Math.random() * back.length)];
    var hex2 = back[Math.floor(Math.random() * back.length)];
    var hex3 = back[Math.floor(Math.random() * back.length)];
    var hex4 = back[Math.floor(Math.random() * back.length)];
    var hex5 = back[Math.floor(Math.random() * back.length)];

    var rand = "#" + hex + hex1 + hex2 + hex3 + hex4 + hex5;    

    $('body')
    .append("<div class='thing'></div>");

    $('.thing').css('background',rand);
}


setInterval(makeThing,1000);

Answer 1

有三种方法可以做到这一点，我认为第一种解决方案可能是最快的，因为它只是字符串构建。第二个解决方案是我会做的，因为它对我来说感觉最干净（将节点表示为对象并更改其上的属性，感觉很好并且面向对象）以及最后的解决方案或任何解决方案，其中你在查询DOM肯定是最慢的，所以即使它只是一个单行程，我也会避免这样做。

方法1：您可以在制作时将style属性附加到div：

function makeThing(){
    var back = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
    var hex = back[Math.floor(Math.random() * back.length)];
    var hex1 = back[Math.floor(Math.random() * back.length)];
    var hex2 = back[Math.floor(Math.random() * back.length)];
    var hex3 = back[Math.floor(Math.random() * back.length)];
    var hex4 = back[Math.floor(Math.random() * back.length)];
    var hex5 = back[Math.floor(Math.random() * back.length)];

    var rand = "#" + hex + hex1 + hex2 + hex3 + hex4 + hex5;    

    $('body')
    .append("<div class='thing' style='background: "+rand+"'></div>");
}


setInterval(makeThing,1000);

方法2：在将元素插入DOM之前构建元素并在javascript中设置背景，只需替换：

$('body').append("<div class='thing'></div>");
$('.thing').css('background',rand);

使用：

var div = $("<div class='thing'></div>");
div.css('background',rand);
$('body').append(div);

方法3：纯jquery解决方案，将$('.thing').css('background',rand)更改为$('.thing:last').css('background',rand)

Answer 2

只需使用last方法

即可

这样：

$('.thing').last().css('background',rand);

see this jsFiddle

它将始终只更改类thing的最后一个元素，该类应该是您追加的最后一个元素。

Answer 3

<强> jsFiddle demo

创建rand辅助函数（您可以传递min和max参数）
使用RGB或HSL种颜色。 更简单。
使用$("<element />", {properties})创建新元素。 它更简单

＆＃13;

function rand(min, max) { return Math.floor(Math.random()*(max-min+1)+min); }

function makeThing(){
  $("<div />", {
    class : "thing",
    appendTo : "body",
    css: { background: "rgb("+rand(0,255)+", "+rand(0,255)+", "+rand(0,255)+")" }
  });
}

setInterval(makeThing,1000);

＆＃13;

body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.thing{
  width: 50px;
  height: 50px;
  background-color: blue;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 4

在将创建的<div>添加到dom之前，您可以使用参考：

var thing = $('<div class="thing"></div>');
thing.appendTo('body').css('background', randomColor);

生成具有相同类的div，但想要单独更改样式

4 个答案: