Например первый раз кликнул, добавился блок красного цвета, второй раз кликнул на эту же ссылку, добавился блок синего цвета и так далее?
1 ответ
jQuery:
var color = [
"red",
"green",
"blue"
];
$(function() {
var add_block = $("#add_block");
add_block.click(function() {
$("#blocks").append("<div style=\"background: " + color[$("#blocks div").length] + " \">test</div>");
});
});
<script src="//code.jquery.com/jquery.min.js"></script>
<button id="add_block">Добавить блок</button>
<div id="blocks"></div>
JavaScript:
var colors = [
"red",
"green",
"blue"
];
window.onload = function() {
var add_block = document.getElementById("add_block");
var blocks = document.getElementById("blocks");
add_block.addEventListener("click", function() {
var div = document.createElement("div");
div.style.background = colors[blocks.getElementsByTagName("div").length];
div.innerHTML = "test";
blocks.appendChild(div);
}, false);
}
<button id="add_block">Добавить блок</button>
<div id="blocks"></div>
P.S. Мы создаём массив с цветами и при клике на кнопку Добавить блок
, добавляем div-элемент в <div id="blocks"></div>
. Цвет определяется так:
У нас есть массив color:
// colors[0] => red
// colors[1] => green
Вместо нуля или единицы, как показано выше (да и в прочем цифра будет любая) мы подставляем количество уже созданных блоков. То есть, если создан 1 элемент, то по условию нашего кода следующий цвет для div-блока
будет green
, затем blue
и так далее.