Question

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

三种风格如下：
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的所有实例，而不是为每个实例选择向右或向左。

如何让我的脚本为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() 1}}：

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

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

1 个答案: