Question

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

我的HTML看起来像......

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

我希望每个'figure'元素宽150像素，高150像素，我想用jQuery自动随机生成'figure'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();
        });
    })();

});

创建随机生成的div，填充jQuery和Javascript框

1 个答案: