javascript - 使用 jQuery 在类的每个实例上添加随机 CSS

Question

我需要做的是将三种 CSS 样式之一添加到 HTML 中 .project_content 的每个实例，并且需要为每个实例随机选择样式。

三种样式如下:
float :左
float :右或
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或为每个实例留下。

如何让我的脚本为 project_content 的每个实例选择一个随机变量，以及如何添加 margin:auto + 计算的宽度 混入？非常感谢。

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);
  }
})​;