2

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

三种样式如下：
float:left
float:rightOR
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而不是为每个实例选择右或左。

如何让我的脚本为每个实例选择一个随机变量，project_content以及如何将margin:auto+ 计算结果添加width到组合中？非常感谢。

4

1 回答 1

7

您需要为集合中的每个元素获取随机样式，而不是为整个集合获取单个随机值。这可以使用 来完成.css( propertyName, function(index, value) )，因为每个匹配的元素都会调用该函数：

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

​演示 。

要添加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);
  }
})​;
于 2012-09-07T22:17:10.197 回答