javascript jquery divs中的随机图像数组

gab6jxml  于 2023-11-15  发布在  Java
关注(0)|答案(2)|浏览(96)

我有这个网站,当你刷新它会带来一个随机的图像从多个JS数组内多个div(每个div有自己的JS数组与不同的图像)。问题是,我的代码只使用最后声明的JS数组,并使用相同的2图片为所有的div。

$('.random-image-container').each(function() {
  var container = $(this)
  $('<img class="random-image" src="' + images[Math.floor(Math.random() * images.length)] + '">').appendTo(container);
})

个字符
有人能帮我吗?

jv4diomz

jv4diomz1#

这似乎与“images”变量的作用域有关。
每一个块都是前一个块的替代,因此,只有最后一个数组在你的jQuery函数中使用。
你有几个可能的解决方案:

  • 为每个数组指定一个不同的变量(例如:var images 1 =“IMG/1.jpg”,“IMG/2.jpg”]; var images 2.)
  • 将data-images属性与images数组一起添加到“random-image-container”div中

第一个月
希望这对你有帮助。
然后,添加到jQuery循环中:
var images = JSON.parse(container.data('images')); //this will access your data-images attribute data

6qfn3psc

6qfn3psc2#

这个问题是因为你在每个<script>块中重新声明了 same 变量-你没有追加/推到数组中。我建议你把保存你的图像路径/文件名的数据结构改为一个对象或2D数组,最重要的是,只定义它 * 一次 *。
下面是一个例子,如果你将代码更新为使用2D数组来存储图像,父数组的每个元素都等于每个.random-image-container,那么代码会是什么样子:

const images = [
  ['IMG/1.jpg', 'IMG/2.jpg'],
  ['IMG/3.jpg', 'IMG/4.jpg'],
  ['IMG/5.jpg', 'IMG/6.jpg'],
  ['IMG/7.jpg', 'IMG/8.jpg']
]

$('.random-image-container').each((i, el) => {
  const filepath = images[i][Math.floor(Math.random() * images[i].length)];
  $(`<img class="random-image" src="${filepath}" alt="${filepath}" />`).appendTo(el);
})

个字符
请注意,alt属性只是添加到这个示例中,以明确显示哪个图像。

相关问题