jQuery：为每个CSS类实例应用独立随机背景色

嘿，我来帮你搞定这个小问题～你当前代码的问题很明确：只生成了一次随机颜色，然后把这个单一颜色应用到了所有.bannercolor元素上，所以它们的背景色自然就一模一样啦。

要实现每个元素独立随机，我们只需要遍历每个元素，给每个元素单独生成随机色就行，用jQuery的.each()方法就能轻松做到。修改后的完整代码如下：

jQuery(document).ready(function( $ ){
  var colors = ['#e5e5e5','#d3f2eb','#cce3ff', '#97d8c9', '#97e9c4', '#c9f9b2', '#c1d4d5', '#b2d5fd', '#fdebb2', '#5cc2ab', '#5cdca2', '#aaf587', '#9ebbbe', '#87bdfc', '#fce086'];
  
  // 遍历每个.bannercolor元素
  $('.bannercolor').each(function() {
    // 给当前元素单独生成随机颜色
    var random_color = colors[Math.floor(Math.random() * colors.length)];
    // 给当前元素设置背景色
    $(this).css('background-color', random_color);
  });
});

简单解释下改动点： #

• 把生成随机色和设置样式的逻辑放到了.each()的回调函数里，这样每遍历一个元素，就会重新生成一次随机色
• 用$(this)指代当前正在遍历的元素，确保颜色只应用到这个元素上

如果之后你想尝试原生JavaScript的写法，也可以参考这段代码，原理是一样的：

document.addEventListener('DOMContentLoaded', function() {
  const colors = ['#e5e5e5','#d3f2eb','#cce3ff', '#97d8c9', '#97e9c4', '#c9f9b2', '#c1d4d5', '#b2d5fd', '#fdebb2', '#5cc2ab', '#5cdca2', '#aaf587', '#9ebbbe', '#87bdfc', '#fce086'];
  const bannerElements = document.querySelectorAll('.bannercolor');
  
  bannerElements.forEach(element => {
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    element.style.backgroundColor = randomColor;
  });
});

这样每个.bannercolor元素就都会有自己独立的随机背景色啦～

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