Javascript 正在生成具有相同类的div，但希望单独更改样式

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

我如何让它只设置它正在创建的div的颜色，而不设置其他div

函数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）]；
变量rand=“#”+hex+hex1+hex2+hex3+hex4+hex5；
$（“正文”）
.附加（“”）；
$（'.thing'）.css（'background'，rand）；
}
设置间隔（makeThing，1000）；

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

方法1:您只需在制作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' style='background: "+rand+"'></div>");
}


setInterval(makeThing,1000);

函数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）]；
变量rand=“#”+hex+hex1+hex2+hex3+hex4+hex5；
$（“正文”）
.附加（“”）；
}
设置间隔（makeThing，1000）；

---

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

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

$（'body'）。追加（“”）；
$（'.thing'）.css（'background'，rand）；

与：

var div=$（“”）；
div.css（“背景”，兰德）；
$（'body'）。追加（div）；

---

---

方法3:一个纯jquery解决方案，将

$（'.thing'）.css（'background'，rand）

更改为

$（'thing:last'）.css（'background'，rand）

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

方法1:您只需在制作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' style='background: "+rand+"'></div>");
}


setInterval(makeThing,1000);

函数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）]；
变量rand=“#”+hex+hex1+hex2+hex3+hex4+hex5；
$（“正文”）
.附加（“”）；
}
设置间隔（makeThing，1000）；

---

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

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

$（'body'）。追加（“”）；
$（'.thing'）.css（'background'，rand）；

与：

var div=$（“”）；
div.css（“背景”，兰德）；
$（'body'）。追加（div）；

---

---

方法3:一个纯jquery解决方案，将

$（'.thing'）.css（'background'，rand）

更改为

$（'thing:last'）.css（'background'，rand）

只需使用

last

方法即可

因此：

---

它总是只会用class

thing

更改最后一个元素，它应该是您附加的最后一个元素。

只需使用

last

方法即可

因此：

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

• 创建

  rand

  helper函数（您可以传递

  min

  和

  max

  参数）
• 使用

  RGB

  或

  HSL

  颜色更简单
• 使用

  $（“”，{properties}）

  创建新元素更简单

函数rand（min，max）{返回Math.floor（Math.random（）*（max-min+1）+min）；}
函数makeThing（）{
$("", {
类：“东西”，
附：“身体”，
css:{背景：“rgb（“+rand（0255）+”，“+rand（0255）+”，“+rand（0255）+”）
});
}
设置间隔（makeThing，1000）
正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
.事情{
宽度：50px；
高度：50px；
背景颜色：蓝色；
浮动：左；
}


创建
rand
helper函数（您可以传递
min
和
max
参数）
使用
RGB
或
HSL
颜色更简单
使用
$（“”，{properties}）
创建新元素更简单

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

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