javascript - 创建随机生成的 div 来填充一个框 jQuery 和 Javascript

Question

我的网站上有一个 100% 宽和 450 像素高的部分。

我的 html 看起来像这样......

<section class="interactive-banner">
    <figure></figure>
</section>

我希望每个“图形”元素的宽度为 150 像素，高度为 150 像素，我想使用 jQuery 自动随机生成“图形”html，并包含一些内部 html。

我有以下...

$(function(){

    var people = [
        { id: 1 },
        { id: 2 }
    ];

    var figure = $('figure');
    w = 1500;
    h = 450;

    var counter = 0;
    var data = people[Math.floor(Math.random()*people.length)];

    (function nextFade() {
        counter++;
        figure.clone().html(data.name).appendTo('.interactive-banner').hide().fadeIn(150, function() {
            if(counter < 30) nextFade();
        });
    })();

});

我希望每个图形元素一个接一个地淡入淡出，总共我只有 7 个原始图形，只有这 7 个会被随机克隆，直到我总共有 30 次迭代，我希望图形 html 包含数据在我的 people 数组中的每个对象中，所以每个图形都可以说是一个对象，输出如此...

<figure>
    <img src="[image src from object inside array]" />
    <div class="information">
        <h5>[name from object inside of array ]</h5>
        <p>[job title from object inside of array ]</p>
    </div>
</figure>

只有在它被输出的那一刻......

<figure style="display: block;">
    Chris
</figure>

我在这里创建了一个示例，如您所见，但是每个图都包含相同的信息...

http://jsfiddle.net/pGmeE/

Answer 1

http://jsbin.com/isopin/1/edit

最初不要填充您的 section，也不要使用 jQ 克隆您的 figure 元素。而是在每次循环迭代时创建一个新的。

<section class="interactive-banner"></section>

jQ:

$(function(){

    var people = [
        { id: 1, name: 'Justin', title: 'Head Designer', bio: 'This is Justin\'s Biography.', image: 'justin.jpg'   },
        { id: 2, name: 'Chris', title: 'Head Developer', bio: 'This is Chris\' Biography.', image: 'chris.jpg'      },
        { id: 3, name: 'Sam', title: 'Developer', bio: 'This is Sam\'s Biography.', image: 'sam.jpg'                },
        { id: 4, name: 'Haythem', title: 'Developer', bio: 'This is Haythem\'s Biography.', image: 'haythem.jpg'    },
        { id: 5, name: 'Geoff', title: 'Designer', bio: 'This is Geoff\'s Biography.', image: 'geoff.jpg'           },
        { id: 6, name: 'Liam', title: 'Designer', bio: 'This is Liam\'s Biography.', image: 'liam.jpg'              }
    ];

    w = 1500;
    h = 450;

    var counter = 0;


    (function nextFade() {
        counter++;
        // Give "random" a chance to get random again
        var data = people[Math.floor(Math.random()*people.length)];
        // Now create a new Figure element:
        var figure = $('<figure />');
        figure.html(data.name).appendTo('.interactive-banner').hide().fadeIn(150, function() {
            if(counter < 30) nextFade();
        });
    })();

});