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 个答案: