Suren97 Ответов: 2

Jquery: как создать 10 divs после нажатия на кнопку create

У меня есть кнопка Create на теле, когда я нажму на эту кнопку, Мне нужно динамически создать 10 дивов и дать случайный цвет и положение. Подобный этому

Что я уже пробовал:

Я пробовал так, но после нажатия на кнопку Create он создает 10 дивов друг на друге, так что я вижу только 1 див. Что не так в моем коде? мне нужно сортировать дивы в разных положениях, а не друг на друге.

$(document).ready(function(){
    $("#btn").click(function(){
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    var color = `rgb(${r},${g},${b})`;
    var ww = $(window).width();
    var wh = $(window).height();
    var posx = (Math.random() * ww);
    var posy = (Math.random() * wh);
    var div=("<div></div>");
    for(var i = 0; i <= 10; i++){
      $(div).css({"background": color, "width":"50", "height":"50","position":"absolute", "top": posy, "left": posx}).appendTo("body");
    }
    })
});

2 Ответов

Рейтинг:
1

Richard Deeming

Вы хотите создать 10 <div>s со случайными позициями и цветами.

Но вы объявляете позиции и цвета снаружи из твоей петли. Значения не меняются внутри цикла, поэтому вы создаете все 10 элементов в одном и том же положении и с одним и тем же цветом.

Переместите вычисления положения и цвета внутри цикла.

// These variables don't change within the loop:
var ww = $(window).width();
var wh = $(window).height();
var div = "<div />";

for (var i = 0; i <= 10; i++){
    // These variables need to be different for each iteration:
    var r = parseInt(Math.random()*256);
    var g = parseInt(Math.random()*256);
    var b = parseInt(Math.random()*256);
    var color = `rgb(${r},${g},${b})`;
    var posx = (Math.random() * ww);
    var posy = (Math.random() * wh);
    
    $(div).css({"background": color, "width":"50", "height":"50","position":"absolute", "top": posy, "left": posx}).appendTo("body");
}

Рейтинг:
1

Member 11621026

вы можете использовать позицию: 

relative
в CSS

Suren97

так что же мне делать??

Suren97

Я пытался использовать положение относительно, но на этот раз оно расположено друг под другом, вот так http://prntscr.com/kdawia

Member 11621026

какое острое требование вы хотите, можете ли вы уточнить, какую позицию вы хотите div.
это мудрые строки столбца Я. Мудрого