生成同一類的div，但要單獨更改樣式

我有一些腳本首先生成一個div，然後將背景設置爲隨機的十六進制顏色。目前，當它設置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);

來源

2015-11-22 Uesls

有三種方法可以做到這一點，我認爲第一個解決方案可能是最快的，因爲它只是字符串建築。第二個解決方案是我會做的，因爲它感覺最乾淨（代表您的節點作爲對象並更改其屬性，感覺良好且面向對象）以及最後一個解決方案或任何解決方案，其中你所查詢的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：建立你的元素，你之前在JavaScript設置背景將其插入到DOM中，只需替換：

$('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)

來源

2015-11-22 18:35:08 Macmee

downvoter想解釋一下爲什麼？ – Macmee

使用'：last'並讓JS解析整個文檔搜索所有這些元素，而不是僅僅在可以立即完成''last''時才應用CSS''last'。在這種情況下，你稱之爲*面向對象*是不準確的。 *「或者一個純粹的jQuery解決方案」* ......你之前展示的jQuery也是* pure *。在處理內存中元素時，最好先將所有CSS應用到該元素，然後再將其插入到DOM中。 –

@ RokoC.Buljan我在回答中解釋說最後的解決方案是最慢的，所以我們達成了一致。我們也同意，在注入DOM之前設置CSS是很好的，因此我的第二種方法仍然是我的最愛，它仍然是最「OOP」的解決方案，因爲您將節點表示爲對象，與第一種解決方案不同這只是一個字符串.... – Macmee

只需使用last方法

這樣：

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

see this jsFiddle

它總是隻會更改類thing的最後一個元素，這應該是您添加的最後一個元素。

來源

2015-11-22 18:36:24 Rooster

jsFiddle demo

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

來源

2015-11-22 18:39:19

您可以使用一個參考你創建<div>你將它添加到DOM前：

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

來源

2015-11-22 18:39:39

生成同一類的div，但要單獨更改樣式

回答

相關問題