如何使用jquery随机化CSS属性的值？

Question

我正在尝试使用jquery使css选择器随机化其在html元素上的值之一。 我已经对所有元素的选择器进行了随机化（在列表左边框的颜色之间循环），但是我想同时对每个单独的列表元素进行随机化。

抱歉，这很令人困惑（我自己对此感到困惑），但是如果您多次运行以下代码并注意边框颜色的变化，您将理解。 理想情况下，这些边框颜色将全部不同。

非常感谢您的帮助。

<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
    <style>
    .bars{
        border-left-style: solid; 
        border-left-width: 4px;
        padding-left: 10px;
    }

    ul{
        list-style-type: none;
    }
    </style>

</head>
<body>
        <ul>
            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>   

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>   

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>   

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>   

            <li class="bars">
              <a>Marathon Men and Women</a>
            </li>   
         </ul>
</body>
<script>
    $(document).ready(function(){
      var colors = ["#CCCCCC","#333333","#990099"];                
      var rand = Math.floor(Math.random()*colors.length);           
      $('.bars').css("border-left-color", colors[rand]);
    });
</script>

http://jsfiddle.net/RMR42/

Answer 1

您可以使用jQuery.each（）函数指定单独的颜色： http : //jsfiddle.net/qaF24/

$(document).ready(function(){
    var colors = ["#CCCCCC","#333333","#990099"];                
    $('.bars').each(function() {
        var rand = Math.floor(Math.random()*colors.length);
        $(this).css("border-left-color", colors[rand]);
    });
});

Answer 2

http://jsfiddle.net/RMR42/1/

var colors = ["#CCCCCC", "#333333", "#990099"];
var bars = document.getElementsByClassName('bars');
for (var i = 0; i < bars.length; i++) {
    bars[i].style.borderLeftColor = colors[Math.floor(Math.random() * colors.length)];
}

也许有效的解决方案将对某人有所帮助。 更快，无需更多代码。

Answer 3

jQuery选择器（.bars）选择类“ bar”的所有元素。 当然，将它们设置为相同。

我建议改为为父元素分配一个id，然后使用.children()选择器遍历每个<li>并分配颜色。

就像是

<ul id="bars">
        <li>
          <a>Marathon Men and Women</a>
        </li>   

        <li>
          <a>Marathon Men and Women</a>
        </li>   

        <li>
          <a>Marathon Men and Women</a>
        </li>   

        <li>
          <a>Marathon Men and Women</a>
        </li>   

        <li>
          <a>Marathon Men and Women</a>
        </li>   
     </ul>
<script>
$(document).ready(function(){
  var colors = ["#CCCCCC","#333333","#990099"],rand;                
  var ligroup = $('#bars').children();
  for (var i=0,len=ligroup.length;i<len;i++) {
       rand = Math.floor(Math.random()*colors.length);
       $(ligroup[i]).css("border-left-color", colors[rand]);
  }

});
</script>

Answer 4

$(document).ready(function () {
var bars = document.getElementsByClassName('bars');
for (var i = 0; i < bars.length; i++) {
    bars[i].style.borderLeftColor ="#"+genColor();
}
});

每个Li的随机颜色生成器： http : //jsfiddle.net/RMR42/2/

如果您希望每个人都是不同且随机的，则必须在所有相似的类元素中使用某种循环。

参考： https : //gist.github.com/wfreeman/1158409

如何使用jquery随机化CSS属性的值？

问题描述

4 个解决方案

解决方案1
4 已采纳 2014-04-12 02:56:38

解决方案2
1 2014-04-12 02:58:16

解决方案3
0 2014-04-12 02:58:00

解决方案4
0 2014-04-12 03:46:02

如何使用jquery随机化CSS属性的值？

问题描述

4 个解决方案

解决方案1 4 已采纳 2014-04-12 02:56:38

解决方案2 1 2014-04-12 02:58:16

解决方案3 0 2014-04-12 02:58:00

解决方案4 0 2014-04-12 03:46:02

解决方案1
4 已采纳 2014-04-12 02:56:38

解决方案2
1 2014-04-12 02:58:16

解决方案3
0 2014-04-12 02:58:00

解决方案4
0 2014-04-12 03:46:02