如何爲循環數組的每組元素設置隨機顏色？

我想在每個.elements上使用jquery設置不同的顏色，他們的子女（.element）應該具有相同的顏色，但顏色的歸屬應該是隨機的，每個.elements。我該怎麼做？如何爲循環數組的每組元素設置隨機顏色？

下面是一個例子：https://jsfiddle.net/auscpzy6/6/

的Html

<div class="elements"> <!-- children share the same color --> 
    <div class="element">1</div> <!-- exmaple : red --> 
    <div class="element">2</div> <!-- exmaple : red --> 
</div> 

<div class="elements"> <!-- children share the same color --> 
    <div class="element">3</div> <!-- exmaple : blue --> 
    <div class="element">4</div> <!-- exmaple : blue --> 
    <div class="element">5</div> <!-- exmaple : blue --> 
</div> 

<div class="elements"> <!-- children share the same color --> 
    <div class="element">6</div> <!-- exmaple : yellow --> 
</div> 

<div class="elements"> <!-- children share the same color --> 
    <div class="element">7</div> <!-- exmaple : blue --> 
    <div class="element">8</div> <!-- exmaple : blue --> 
</div>

的Javascript：這是我試過，但都停留在相同的顏色。

function eachEl(el){ 
    var items = ["blue", "red", "yellow"]; 
    var item = items[Math.floor(Math.random()*items.length)]; 
    $(el).css({ 
     "color": item, 
    }); 
} 

$(".elements").each(function() { 
    eachEl('.element'); 
});

任何解決方案？

來源

2017-07-05 Lindow

改變要做到這一點，你通過.elements需要循環，然後從隨機顏色數組然後在該元素上設置顏色。

您的代碼問題在最後一部分，因爲您提供了一個選擇器，它檢索所有.elements來執行css()調用，而不是迭代中的當前調用。試試這個，並注意每個循環內使用this修改每個特定的元素：

$(".elements").each(function() { 
 
    var items = ["blue", "red", "yellow"]; 
 
    var colour = items[Math.floor(Math.random() * items.length)]; 
 
    $(this).css('color', colour); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elements"> 
 
    <div class="element">1</div> 
 
    <div class="element">2</div> 
 
</div> 
 

 
<div class="elements"> 
 
    <div class="element">3</div> 
 
    <div class="element">4</div> 
 
    <div class="element">5</div> 
 
</div> 
 

 
<div class="elements"> 
 
    <div class="element">6</div> 
 
</div> 
 

 
<div class="elements"> 
 
    <div class="element">7</div> 
 
    <div class="element">8</div> 
 
</div>

來源

2017-07-05 09:05:06

我看，另一個問題是，這是最好的方式來做到這一點性能明智嗎？我發現加載需要一些時間，而且我擔心在200個元素上可能會出現滯後現象。 – Lindow

如果你關心性能，那麼我建議完全避免jQuery。通過DOM直接循環將會快得多，儘管如果DOM中有很多元素循環遍歷 –

您可以用$(this)代替.element傳遞eachEl功能，這樣eachEl($(this))

function eachEl(el) { 
 
    var items = ["blue", "red", "yellow"]; 
 
    var item = items[Math.floor(Math.random() * items.length)]; 
 
    $(el).css({ 
 
    "color": item, 
 
    }); 
 
} 
 

 
$(".elements").each(function() { 
 
    eachEl($(this)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">1</div> 
 
    <!-- exmaple : red --> 
 
    <div class="element">2</div> 
 
    <!-- exmaple : red --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">3</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">4</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">5</div> 
 
    <!-- exmaple : blue --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">6</div> 
 
    <!-- exmaple : yellow --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">7</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">8</div> 
 
    <!-- exmaple : blue --> 
 
</div>

來源

2017-07-05 09:04:33 prasanth

你需要傳遞eachEl(this)，而不是eachEl('.element')，然後到el所有兒童設置的色彩隨機選擇的顏色;

function eachEl(el) { 
 
    var items = ["blue", "red", "yellow"]; 
 
    var item = items[Math.floor(Math.random() * items.length)]; 
 
    $(el).children('.element').css({ 
 
    "color": item, 
 
    }); 
 
} 
 

 
$(".elements").each(function() { 
 
    eachEl(this); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">1</div> 
 
    <!-- exmaple : red --> 
 
    <div class="element">2</div> 
 
    <!-- exmaple : red --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">3</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">4</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">5</div> 
 
    <!-- exmaple : blue --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">6</div> 
 
    <!-- exmaple : yellow --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">7</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">8</div> 
 
    <!-- exmaple : blue --> 
 
</div>

來源

2017-07-05 09:05:21 Dij

而不是eachEl('.element');你需要使用eachEl($(this).find('.element'));。您的代碼採用了類別爲element的元素，但您只需要當前elements的孩子element。

function eachEl(el) { 
 
    var items = ["blue", "red", "yellow"]; 
 
    var item = items[Math.floor(Math.random() * items.length)]; 
 
    $(el).css({ 
 
    "color": item, 
 
    }); 
 
} 
 

 
$(".elements").each(function() { 
 
    eachEl($(this).find('.element')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">1</div> 
 
    <!-- exmaple : red --> 
 
    <div class="element">2</div> 
 
    <!-- exmaple : red --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">3</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">4</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">5</div> 
 
    <!-- exmaple : blue --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">6</div> 
 
    <!-- exmaple : yellow --> 
 
</div> 
 

 
<div class="elements"> 
 
    <!-- children share the same color --> 
 
    <div class="element">7</div> 
 
    <!-- exmaple : blue --> 
 
    <div class="element">8</div> 
 
    <!-- exmaple : blue --> 
 
</div>

來源

2017-07-05 09:06:07

的問題是要傳遞'.element'而不是$(this)，這應該工作：

function eachEl(el) { 
    var items = ["blue", "red", "yellow"]; 
    var item = items[Math.floor(Math.random() * items.length)]; 
    $(el).css({ 
    "color": item, 
    }); 
} 

$(".elements").each(function() { 
    eachEl($(this)); 
});

來源

2017-07-05 09:06:33

'eachEl（this）'就足夠了，並且避免雙重包裝jQuery對象 –

應用後，您可以通過從陣列中去除顏色來獲得獨特的顏色。進一步檢查我的答案。 –

@NikhilNanjappa OP指出重複的顏色很好;他們在HTML註釋中列出了兩次'藍色'。事實上，重複項必須確定，因爲有4組，但只有3個顏色選項 –

function ChangeColorCtrl($) { 
 
    const colors = ['red', 'yellow', 'blue', 'green']; 
 
    
 
    return $('.elements') 
 
    .each((i, group) => { 
 
     const background = colors[Math.floor(Math.random() * colors.length)]; 
 
     
 
     return $(group) 
 
     .each((j, child) => $(child).css({background})) 
 
     ; 
 
    }) 
 
    ; 
 
} 
 

 
jQuery(document).ready(ChangeColorCtrl);

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

 
<div class="elements"> <!-- children share the same color --> 
 
    <div class="element">1</div> <!-- exmaple : red --> 
 
    <div class="element">2</div> <!-- exmaple : red --> 
 
</div> 
 

 
<div class="elements"> <!-- children share the same color --> 
 
    <div class="element">3</div> <!-- exmaple : blue --> 
 
    <div class="element">4</div> <!-- exmaple : blue --> 
 
    <div class="element">5</div> <!-- exmaple : blue --> 
 
</div> 
 

 
<div class="elements"> <!-- children share the same color --> 
 
    <div class="element">6</div> <!-- exmaple : yellow --> 
 
</div> 
 

 
<div class="elements"> <!-- children share the same color --> 
 
    <div class="element">7</div> <!-- exmaple : blue --> 
 
    <div class="element">8</div> <!-- exmaple : blue --> 
 
</div>

來源

2017-07-05 09:09:19 Hitmands

它不是隨機的 – Lindow

這只是一個例子如何分享孩子之間的BG。 – Hitmands

所有提供的答案都是正確的，您只需將'.element'替換爲this即可。但我會更進一步，以展示如何獲得每個element div的獨特顏色。

解決方案：只需從陣列刪除顏色一旦應用，所以它不適用了。

function eachEl(el) { var items = ["blue", "red", "yellow"]; var item = items[Math.floor(Math.random() * items.length)]; $(el).css({ "color": item, }); items.splice(items.indexOf(item), 1); //remove the color just applied } $(".elements").each(function() { eachEl(this); });

來源

2017-07-05 09:12:36

如何爲循環數組的每組元素設置隨機顏色？

回答

相關問題