0

Например первый раз кликнул, добавился блок красного цвета, второй раз кликнул на эту же ссылку, добавился блок синего цвета и так далее?

1 ответ 1

5

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 и так далее.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.