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

Question

我有一些脚本首先生成一个 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);

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

---

方法三:纯jquery方案，将$('.thing').css('background',rand)改为$('. thing:last').css('background',rand)