Question

我有4点积分。

我想为每个元素生成随机颜色。我用JSON存储颜色。

JSON：

var myJson = [{   
"color":"#69bf64",  
"name":"Green",  
"namePL":["Zielony"]},    
{   
"color":"#f7f390",  
"name":"Yellow",  
"namePL":["Żółty"]}, 
{  ];

我的清单：

<ul id="answer">
    <li class="random">One</li>
    <li class="random">Two</li>
    <li class="random">Three</li>
    <li class="random">Four</li>
</ul>

试图以这种方式做到这一点，但不起作用。

for(var i =0;i < $('.random').length-1;i++)
{
   getColour = function(){
    var entry = myJson[Math.floor(Math.random()*myJson.length)];           
    return entry;      
   }
     var localObj = getColour();
     $('#random').css('color', localObj.color );
}

Answer 1

试试这个：

$('.random').css('color', localObj.color );

您正在使用用于ID的(#random)。使用(.random)用于类

Answer 2

<强> jsFiddle Demo

只需使用.each进行迭代

即可

$('.random').each(function(){
 $(this).css('color',myJson[Math.floor(Math.random()*myJson.length)].color);
});

Stack Snippet Demo

＆＃13;

var myJson = [{   
"color":"#69bf64",  
"name":"Green",  
"namePL":["Zielony"]},    
{   
"color":"#f7f390",  
"name":"Yellow",  
"namePL":["Żółty"]}, 
];
setInterval(function(){
$('.random').each(function(){
 $(this).css('color',myJson[Math.floor(Math.random()*myJson.length)].color);
});
},1000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>sets random color every second to show changes</div>
<ul id="answer">
    <li class="random">One</li>
    <li class="random">Two</li>
    <li class="random">Three</li>
    <li class="random">Four</li>
</ul>

＆＃13;

Answer 3

如果你想为每个li有不同的颜色：

＆＃13;

    var myJson = [{   
    "color":"#69bf64",  
    "name":"Green",  
    "namePL":["Zielony"]},    
    {   
    "color":"#f7f390",  
    "name":"Yellow",  
    "namePL":["Żółty"]}, 
    {
    "color":"#cc0000",  
    "name":"Red",  
    "namePL":["czerwony"],
    },
    {
    "color":"#0000cc",  
    "name":"Blue",  
    "namePL":["niebieski"],
    }];


   for(var i =0;i < $('.random').length;i++){
       getColour = function(){
           var entry = myJson[Math.floor(Math.random()*myJson.length)];           
       return entry;      
       }
       var localObj = getColour();
       $('.random:eq('+i+')').css('color', localObj.color );
   }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="answer">
    <li class="random">One</li>
    <li class="random">Two</li>
    <li class="random">Three</li>
    <li class="random">Four</li>
</ul>

＆＃13;

试试这个小提琴：http://jsfiddle.net/pxw06p64/

Answer 4

您可以使用下面的功能为您生成随机颜色：

function randColor() {
  var dig = '0123456789ABCDEF',
      col = '#';
  for(var i=0; i < 6; i++) {
    col += dig.charAt( Math.round( Math.random() * dig.length ) );
  }
  return col;
}
var li = $('<li/>'),
    ul = $('ul.list');
$.each([0,1,2,3,4,5,6], function() {
  ul.append( li.clone().attr('style','color:' + randColor() + ';').text( this ) );
});

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

Answer 5

function randColor() {
  var dig = '0123456789ABCDEF',
      col = '#';
  for(var i=0; i < 6; i++) {
    var thecolor = dig.charAt( Math.round( Math.random() * dig.length ) );
    while (thecolor < 333333)
    {
        thecolor = dig.charAt( Math.round( Math.random() * dig.length ) );
    }
    col += thecolor;
  }
  return col;
}
      $('.random').each(function(){
      $(this).css('color',randColor());
      });
      $('.random a').each(function(){
      $(this).css('color',randColor());
      });

“。random”是li类“ .random”的地方

为每个列表元素生成随机颜色

5 个答案: