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

Question

我需要做的是为.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到混合中？非常感谢.

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