使用 Javascript 在页面加载时为图像分配随机背景颜色

Question

我不擅长 javascript，但我认为这是可行的，可以使用你的帮助。

我有一个名为 .thumbs 的 div 类，在这个 div 内是灯箱画廊的所有缩略图（这些缩略图也是链接）。

图像有内边距和边框，因此您可以在内边距中看到图像的背景颜色。

我想要一个脚本，它将从五种颜色中随机分配一个颜色作为 :hover 上每个图像的背景图像。

我认为最好在页面加载时只分配一次这些颜色，而不是每次将图像悬停在上面时都分配一个新的随机颜色。

我查看了 Chad 的这个答案，用于为 div 类分配随机颜色，但即使 jsfiddle 看起来很棒，我也无法让它按预期工作。我敢肯定我的结局有些奇怪..many divs with same class - different background

非常感谢任何帮助！谢谢！

Answer 1

根据您的评论，您可以这样做（此代码还需要 jquery）：

<style>
    .color-1 a img:hover{background-color:red;}
    .color-2 a img:hover{background-color:blue;}
    .color-3 a img:hover{background-color:green;}
    .color-4 a img:hover{background-color:yellow;}
    .color-5 a img:hover{background-color:orange;}
</style>

<script>
    $(function(){ // this is a shortcut for "on document ready"
        // For each element with the class thumb we find:
        $('.thumb').each(function(){
            // add random class to assign the color
            $(this).addClass('color-' + (Math.floor(Math.random() * 5) + 1));
        });
    })
</script>
...

希望这会有所帮助:)