在连续的div中随机显示2组不同的图像

Question

我有两套不同的图像。

第一集是：img1.jpg，img2.jpg，img3，jpg

第二集是：imga.jpg，imgb.jpg，imgc.jpg

我还有三个不同的div #one，＃tw，＃three。

每组图像必须遵循顺序。 img1.jpg必须嵌入div #one，img2.jpg必须嵌入div #two＆amp; img3.jpg必须嵌入div #three。

第二组图像也必须发生同样的事情。但图像集会随机变化。

我想随机显示图像集。意味着，当用户登录时，他们可能会看到第一组图像，刷新后他们可能会看到第二组图像。

直到现在我能够随机化图像数组。但是图像不是按照div的顺序嵌入的。所有图像都嵌入到单个div中

查看我的代码，纠正我的错误：

$(function () {
    var arr1 = ["map_slice_1.jpg", "map_slice_2.jpg", "map_slice_3.jpg", "map_slice_4.jpg", "map_slice_5.jpg", "map_slice_6.jpg",
        "map_slice_7.jpg", "map_slice_8.jpg"];
    var arr2 = ["kolkata_1.jpg", "kolkata_2.jpg", "kolkata_3.jpg", "kolkata_4.jpg", "kolkata_5.jpg", "kolkata_6.jpg", "kolkata_7.jpg",
        "kolkata_8.jpg"];
    var currentArr = Math.random() < 0.5 ? arr1 : arr2;
    $.each(currentArr, function (i, val) {
        var i = 0;
        while (i++ < 8) {
            $('#map_slice_' + i).append('<img src="map/' + val + '"/>');
        }
        //$('#yourContainer').append('<img src="'+val+'"/>');
    });
});

Answer 1

尝试

fiddle Demo

$.each(currentArr, function (i, val) {
    $('#map_slice_' + ++i).append('<img src="map/' + val + '"/>');
});