使用jQuery在類的每個實例上添加隨機CSS

Question

我需要做的是將三種CSS樣式之一添加到HTML中的.project_content每個實例中，並且需要為每個實例隨機選擇該樣式。

三種樣式如下：
float:left
float:right或
margin:auto + width:x （計算.project_content的寬度， x是計算的寬度）

現在我有這個：

<script type="text/javascript">
$(document).ready(function(){
    var floats         = ["right","left"];                
  var rand = Math.floor(Math.random()*floats.length);           
  $('.project_content').css("float", floats[rand]);
});​​​​​​​​​​​​​
</script>

該腳本為我所做的全部工作是將float:left或float:right應用於.project_content所有實例，而不是為每個實例選擇right或left。

如何讓我的腳本為project_content每個實例選擇一個隨機變量，以及如何將margin:auto +計算出的width到混合中？ 非常感謝。

Answer 1

您需要為集合中的每個元素獲取一個隨機樣式，而不是為整個集合獲取一個隨機值。 可以使用.css( propertyName, function(index, value) ) ，因為該函數將為每個匹配的元素調用：

$('.project_content').css("float", function () {
  var rand = Math.floor(Math.random() * floats.length);
  return floats[rand];  
})​;

DEMO 。

要將margin和width添加到混合中，您不再可以使用css() （因為您需要修改多個屬性之一），但是可以使用.each() ：

var styles = [ "left", "right", "margin" ];
$('.project_content').each(function () {
  var randomStyle = styles[Math.floor(Math.random() * floats.length)];
  if (randomStyle == "left" || randomStyle == "right") {
    $(this).css('float', randomStyle);
  } else { // margin
    $(this).css('margin', 'auto')
           .css('width', your_calculated_width);
  }
})​;