1

Web サイトに幅 100%、高さ 450 ピクセルのセクションがあります。

私のhtmlはそうのように見えます...

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

各 'figure' 要素を幅 150 ピクセル、高さ 150 ピクセルにし、'figure' html を jQuery で自動的かつランダムに生成し、いくつかの内部 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つしかない。合計で30回の反復があるまで、これらの7つだけがランダムに複製され、フィギュア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/

4

1 に答える 1

2

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

最初に要素を設定したり、jQ で要素をsection複製したりしないでください。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();
        });
    })();

});
于 2013-08-11T21:21:16.287 に答える