1. 首页
  2. 问答
  3. 如何为循环数组的每组元素设置随机颜色？

如何为循环数组的每组元素设置随机颜色？

2017-07-05 35 views
1

我想在每个.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

回答

2

改变要做到这一点，你通过.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

+0

我看，另一个问题是，这是最好的方式来做到这一点性能明智吗？我发现加载需要一些时间，而且我担心在200个元素上可能会出现滞后现象。 – Lindow

+1

如果你关心性能，那么我建议完全避免jQuery。通过DOM直接循环将会快得多，尽管如果DOM中有很多元素循环遍历 –

1

您可以用$(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

1

你需要传递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

1

而不是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

3

的问题是要传递'.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

+0

'eachEl（this）'就足够了，并且避免双重包装jQuery对象 –

+0

应用后，您可以通过从阵列中去除颜色来获得独特的颜色。进一步检查我的答案。 –

+0

@NikhilNanjappa OP指出重复的颜色很好;他们在HTML注释中列出了两次'蓝色'。事实上，重复项必须确定，因为有4组，但只有3个颜色选项 –

0 

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

+0

它不是随机的 – Lindow

+0

这只是一个例子如何分享孩子之间的BG。 – Hitmands

1

所有提供的答案都是正确的，您只需将'.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

相关问题

 相关问题