Создайте случайно сгенерированные divs, которые заполняют поле jQuery и Javascript

У меня есть раздел на моем сайте, который на 100% широкий и 450 пикселей.Создайте случайно сгенерированные divs, которые заполняют поле jQuery и Javascript

Мой HTML выглядит так ...

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

Я хочу, чтобы каждый элемент «фигура» быть шириной 150 пикселей и 150 пикселей в высоту, я хочу, чтобы автоматически и случайным образом генерировать «фигуру» 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(); 
     }); 
    })(); 

});

Я хочу, чтобы каждый рисунок элемент исчезать в 1 после того, как другой, в общей сложности у меня будет только 7 оригинальных фигур, только эти 7 будут случайным образом клонировали, пока я есть 30 итераций в общей сложности я хочу фигуру HTML, чтобы содержать данные внутри каждого объекта в моем массиве людей, поэтому каждый рисунок является объектом, так сказать, выход, как так ...

<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>

Ive создали пример здесь, как вы видите, однако каждая фигура содержит ту же информацию ...

http://jsfiddle.net/pGmeE/

источник

2013-08-11 Liam

Вы пытаетесь трудно с попытками закрытия. Вам нужно вызвать функцию, которая возвращает данные, а не надеяться на данные: «function getData() {return people [Math.floor (Math.random() * people.length)];}' – mplungjan

Sorry @mplungjan I Я понимаю, вы не можете понять? что вы имеете в виду мои попытки закрытия? – Liam

Как это видно ... Вы пытаетесь заполнить один за другим на рейсе ваши DIV с изображениями. Для каждого изображения, это новый запрос на сервер, потребуется некоторое время для загрузки ваших изображений, и в итоге вы получите довольно уродливый эффект. –

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

Не заполнять свой section первоначально и не клон ваш figure элемент с jQ. Скорее создайте новый на каждой итерации цикла.

<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-11 21:21:16

Создайте случайно сгенерированные divs, которые заполняют поле jQuery и Javascript

ответ

Смежные вопросы