如何使用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