在列表元素Javascript上设置随机背景

我试图为列表创建一个随机背景，其中我有以下结构：

<ul id="grid" class="clear">
    <li>
        <div class="hexagon"></div>
    </li>
    <li>
        <div class="hexagon"></div>
    </li>
    <li>
        <div class="hexagon"></div>
    </li>
    ...

有没有办法修复它，使每个六边形都有不同的背景

---

还有，我可以让它每隔x秒随机更改一次背景，而不必刷新它，以便在页面已加载时更改背景吗？

将“hexagon”类更改为“this”，如下所示

$(this).find("#grid li .hexagon").each(function() { 

  $(this').css({'background-image': 'url(images/' + bgz[Math.floor(Math.random() *      
  bgz.length)] + ')'}) // it will attach your css into the current div for each loop.

})

这一点不一样，它会将css应用于所有具有“hexagon”类的div，即使循环是以百万计的

$(this).find("#grid li .hexagon").each(function() { $('.hexagon').css({'background-image': 'url(images/' + bgz[Math.floor(Math.random() *      bgz.length)] + ')'}) })

---

在执行此操作之前，请确保等待文档加载

$（document）.ready

，否则您尝试设置样式的元素将不存在。然后，在您的

每个

循环中，引用

$（this）

而不是

$（“.hexagon”）

，因此您只引用当前六边形，而不是所有六边形。如果您不在乎某些六边形是否具有相同的背景图像，您可以这样做：

var bgz=['http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg2.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg3.png'，'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg4.png', 'http://bytecrank.com/filebox/316d4df8eae0e148ef1237ead8118e03c7188b3aba829f9aaa42d1e53998c02856a84036913cccd69da3a6505bbf124efac43684a45fde319ab5866e114c0687/shared/stackoverflow/images/bg5.png']；
$（文档）.ready（函数（）{
$（“#grid li.hexagon”）。每个（函数（）{
$（this.css（{backgroundImage:url（''“+rando（bgz）.value+'）”）“}）；
});
})；

.hexagon{
高度：40px；
宽度：40px；
显示：内联块；
}

将

$（'.hexagon'）.css

更改为

$（this）.css

。您将使用

在每个元素上循环。每个（）

。但是，通过使用类作为选择器，而不是只选择当前正在循环的类，您每次都可以有效地同时更改它们。至于计时器，这是一个简单的使用问题或更简单的解释：。您所要做的就是将现有代码嵌入其中。您好，icecube，您将如何实现在这种情况下使用splice（）？仅使用$（this）.css使我在屏幕上绕了50个六边形时速度变得非常慢。请确保下次给我标记@。否则我不会收到通知，而且我通常会忘记前一天的问题。无论如何，我在这里为您制作了一个示例脚本：

$(this).find("#grid li .hexagon").each(function() { $('.hexagon').css({'background-image': 'url(images/' + bgz[Math.floor(Math.random() *      bgz.length)] + ')'}) })