Создайте 3000 квадратов процедурно
Мне нужно создать виджет, содержащий 3000 квадратов. Выполнение этого вручную заняло бы очень много времени, может быть, кто-то из вас знает самый простой способ сгенерировать класс.квадрат 3000 раз? Мне также нужно иметь возможность изменять содержимое каждого квадрата, например цвет, заголовок и т.д. Спасибо, друзья!
<div class="square">
<h1>10</h1>
</div>
4 answers
Вам просто нужен цикл и создавать новый квадрат на каждой итерации. Чтобы иметь возможность получить доступ к каждому квадрату по отдельности, каждый сгенерированный квадрат получает свой собственный уникальный идентификатор:
var cont = document.getElementById("container");
for(var i = 1; i <3001; ++i){
var div = document.createElement("div");
div.setAttribute("class", "square");
div.setAttribute("id", "div" + i);
var h1 = document.createElement("h1");
h1.textContent = i;
div.appendChild(h1);
cont.appendChild(div);
}.square{
background:#fa5339;
color:#fff;
width:100px;
height:100px;
float:left;
border:1px solid #d63d26;
}
h1{
height: 50%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}<div id=container>
</div>Ваш вопрос очень расплывчатый.
Какие технологии вы готовы (или способны в случае домашнего задания, такого как проект) использовать для достижения своей цели?
Если вы понятия не имеете, как это сделать, я бы посоветовал вам начать изучать некоторые jQuery, то есть фреймворк javascript, который позволяет вам делать довольно крутые и простые вещи.
Если вы в конечном итоге используете jquery, все, что вам нужно будет сделать, это создать элемент, скажем:
<div id="container"></div>
А затем где-то в вашем javascsript у вас будет массив javascript с объектами, для которых вы выполняете рендеринг, скажем, объект с именем square {цвет, заголовок, текст, имя, это, то}
И после этого вы можете просто создать цикл, создать свои html-элементы в виде строки и использовать jquery для добавления элементов в ваш DOM. Примером может быть:
var myContainer = $('#container'); <--- this holds a reference to the container element using jquery
for(var i=0,len=myArray.length;i<length;i++){ <-- in my array you would have your "square" objects so that you can modify each square based on parameters like name,title,color etc
var elementInString = '<div class="square" style="color:"'+myArra[i].color+'>'; <-- and create your parameterised square here
$(myContainer).append(elementInString);
}
Это один из способов сделать это. Другой способ включает использование других фреймворков (Нокаут, угловой и т.д.)
Я надеюсь, что это поможет
var container = $('#container');
for (var i = 0; i < 3000; i++) {
container.append($('<div class="square"><h1>10</h1></div>'));
}.square {
background: #fa5339;
color: #fff;
width: 100px;
height: 100px;
float: left;
border: 1px solid #d63d26;
}
h1 {
height: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>Лучшим способом было бы использовать JavaScript, чтобы сделать их для вас
Пример, который я привел здесь, сделает то, что вы хотите, а также установит каждому уникальный идентификатор, чтобы их можно было редактировать.
<div id="square_container"> </div>
<script>
var i, square, text, container = document.getElementById("square_container");
for (i = 1; i <= 3000; i += 1) {
square = document.createElement("div");
square.id = "square" + i;
square.classList.add("square");
text = document.createElement("h1");
text.innerHTML = i;
text.id = "text" + i;
square.appendChild(text);
container.appendChild(square);
}
</script>