我有一些脚本,它首先生成一个div,然后将背景设置为随机的十六进制颜色。目前,当它设置div的背景颜色时,它为该类的所有div设置背景颜色。
如何让它只设置它正在创建的div的颜色,而不设置其他div的颜色?
http://jsfiddle.net/rb2v1bu5/
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);
有三种方法可以做到这一点,我认为第一种解决方案可能是最快的,因为它只是字符串构建。第二个解决方案是我会做的,因为它对我来说是最干净的(将节点表示为对象并更改其属性,对我来说感觉很好,而且是面向对象的),而最后一个解决方案,或者任何查询DOM的解决方案,肯定是最慢的,所以即使它只是一行代码,我也会避免这样做。
方法1:您可以在创建div时将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)
只需使用last
方法
所以:
$('.thing').last().css('background',rand);
看到这个jsFiddle
它总是只更改thing
类的最后一个元素,它应该是您附加的最后一个子元素。
在将创建的<div>
添加到dom之前,可以对其使用引用:
var thing = $('<div class="thing"></div>');
thing.appendTo('body').css('background', randomColor);
jsFiddle演示
- 创建一个
rand
辅助函数(可以传递min
和max
参数) - 使用
RGB
或HSL
颜色它更简单 - 使用
$("<element />", {properties})
创建新元素更简单
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);
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.thing{
width: 50px;
height: 50px;
background-color: blue;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>