Форум

TimurChic · #1 (**permalink**) 27.02.2017, 18:52

Подскажите, как лучше решить такую задачу? Нужно, чтобы вставлялся блок "Активных задач нет", если этих блоков с задачами нет. И, собственно скрывался если эти блоки появляются Сделали вот такой вариант, но кажется что это не совсем хорошее решение

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Задачи</title>
</head>
<body>
	<ul class="tasks-list" id="tasks">
		<li class="tasks-list__item">
			<a class="tasks-list__title _gray" href="#">
				<span class="tasks-list__text">Задачи</span>
				<span class="tasks-list__btn"></span>
			</a>
		</li>
	</ul>
	<script>
		var list = document.querySelector(".tasks-list");
		var countLi = list.getElementsByTagName("li").length;
		var taskContainer = document.getElementById("tasks");

	if (countLi <= 1) {
    	var li = document.createElement("li");
    	var a = document.createElement("a");
    	var span = document.createElement("span");

    	li.classList.add("tasks-list__no-tasks");
    	a.classList.add("tasks-list__title");
    	span.classList.add("tasks-list__text");
    	span.innerText = "Активных задач нет";
    	a.href = "#";
    	a.appendChild(span);
    	li.appendChild(a);
    	taskContainer.appendChild(li);
	}

	if (countLi >= 1) {
        var elemLi = document.getElementsByClassName("tasks-list__no-tasks")[0];
        taskContainer.removeChild(elemLi);
        }
	
	</script>	
</body>

рони · #2 (**permalink**) 27.02.2017, 19:27

TimurChic,
а зачем нужно удалять то что не ставилось? и конечно зачем добавлять, почему это не сервер делает?

рони · #3 (**permalink**) 27.02.2017, 19:38

TimurChic,

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Задачи</title>
</head>
<body>
  <ul class="tasks-list" id="tasks">

  </ul>
  <script>
 var list = document.querySelector(".tasks-list");
 if (!list.children.length) {
    	var li = document.createElement("li");
    	var text = document.createTextNode("Активных задач нет");
        li.className = "tasks-list__no-tasks";
    	li.appendChild(text);
    	list.appendChild(li);
  }
  </script>
</body>
</html>

TimurChic · #4 (**permalink**) 27.02.2017, 20:04

Немного может не до конца объяснил проблему))) Вот этот блок

<li class="tasks-list__item">
           <a class="tasks-list__title _gray" href="#">

                <span class="tasks-list__text">Задачи</span>

                <span class="tasks-list__btn"></span>

           </a>

</li>

Он изначально всегда в верстке, остальные блоки генерируются при помощи JS. Нужно написать код, который будет проверять, есть ли блок с другими задачами и если их нет, то вставляется такой блок "Активных задач нет". И наоборот, когда добавляем задачу, этот блок убирается)) Как-то так

рони · #5 (**permalink**) 27.02.2017, 20:21

TimurChic,
не понял ничего, что блоки генерирует то пусть и добавляет Активных задач нет, что задачи добавляет то и убирать должно ~~Активных задач нет~~

Форум

Справочник

Discord чат

Курсы javascript