PHP循环生成DIV后，如何用jQuery随机设置其边框颜色？

你的问题很典型——现在的代码是先生成一个固定的随机颜色，再把所有.booty元素统一设置成这个颜色，自然所有DIV的边框都一模一样啦。要让每个DIV拥有独立的随机边框颜色，核心是给每个元素单独执行一次随机颜色的生成逻辑，而不是只生成一次就复用。

下面是修改后的可运行代码：

$(document).ready(function(){
  var colorArray = ["orange", "blue", "black", "yellow", "green"];
  // 遍历每个.booty元素，为单个元素单独处理颜色
  $(".booty").each(function(){
    // 为当前元素生成专属的随机颜色索引
    var randomIndex = Math.floor(Math.random() * colorArray.length);
    // 给当前元素设置边框颜色
    $(this).css('border-color', colorArray[randomIndex]);
  });
});

关键改动说明： #

• 使用$.each()方法遍历所有.booty元素，确保每个元素都能触发独立的颜色选择流程
• 把随机索引的生成逻辑放到遍历循环内部，让每个元素都拿到独一无二的随机值
• 用Math.floor()替代了Math.round()：因为当随机数接近数组长度边界时，Math.round()可能会生成超出数组索引范围的数值（比如数组长度为5时，随机数4.9会被round成5，但数组最大索引是4），Math.floor()能保证索引始终在0到colorArray.length-1之间，避免报错

如果你的DIV数量远多于颜色数组的长度，还可以考虑在每次选择颜色后从数组中移除已选值（不过当数组为空时要重新填充），进一步降低颜色重复的概率，但这一步属于可选优化，根据你的实际需求调整即可。

内容的提问来源于stack exchange，提问作者Shasha