Можно ли использовать оператор else if для поэтапного раскрытия элементов с помощью JavaScript?
Редактировать: Спасибо! Эта проблема решена. Это был мой первый вопрос о StackExchange, и вы все были очень любезны, ответив так быстро, проницательно и подробно.
Я создаю страницу с кнопкой «добавить еще одну задачу». При каждом нажатии один скрытый элемент должен изменить свойства CSS со «скрытого» на «видимое», добавляя на страницу еще одну строку входных данных. Мне удалось показать их все одновременно, но я пытаюсь показать строки по одной.
Вот что я написал на данный момент. В противном случае, если утверждения имели для меня наибольший смысл, судя по сообщениям SE, которые я читал о них, но при первом нажатии кнопки обе скрытые строки («задача2» и «задача3») открываются одновременно. Я использую неправильный условный оператор? Или операторы должны находиться внутри своих собственных функций внутри функции showNextTask? Буду признателен за любую помощь!
function showNextTask() {
let task2 = document.querySelector("#task-2-row");
let task3 = document.querySelector("#task-3-row");
if ((task2.style.visibility === "hidden")) {
task2.style.visibility = "visible";
task2.style.maxHeight = "80px";
} else if (
(task2.style.visibility === "visible") &&
(task3.style.visibility === "hidden")
) {
task3.style.visibility = "visible";
task3.style.maxHeight = "80px";
}
}
let nextInputTask = document.querySelector("#add-another-task-button");
nextInputTask.addEventListener("click", showNextTask);
Как указано ниже, вот HTML-код задачи 2 (задача 3 идентична):
<div id = "task-2-row">
<form id = "add-task-2">
<span class = "add-task-2-description">
<input
type = "text"
placeholder = "Task 2"
autocomplete = "off"
id = "task-input-bar-2"
class = "task-input-field"
/>
</span>
<span class = "add-task-2-time">
<input
type = "time"
id = "timer-field-2"
class = "task2 timer-field"
name = "appt"
/>
<input
type = "submit"
id = "submit-task-2-button"
class = "button add-timer-button"
value = "Add Task"
/>
</span>
</form>
</div>
И CSS:
#task-2-row {
visibility: hidden;
max-height: 0;
}
Что вы планируете делать, когда пользователь захочет добавить 10 задач или 20?
Конечно, имеет смысл вместо того, чтобы показывать скрытые элементы, добавлять новый элемент в конце каждый раз, когда происходит щелчок?
но при первом нажатии кнопки обе скрытые строки ("задача2" и "задача3") открываются одновременно" - не понимаю, как это могло быть на самом деле (даже с учетом уже упомянутой ошибки сравнения); ветки if и else не могут выполняться «одновременно».
@Pointy, да, ты прав! Я это исправил, спасибо. Я обновлю вопрос.
@trincot Я работаю над тем, чтобы превратить эту функцию во что-то масштабируемое! Сейчас я просто демонстрирую, как будет работать кнопка, если пользователь нажмет ее один или два раза, в качестве примера.
@Paulie_D ты прав, это имеет больше смысла. У меня пока недостаточно опыта, чтобы это сделать, но я почитаю об этом и попробую это вместо этого в своей следующей итерации.
Можете ли вы добавить HTML, который вы используете? И какой-нибудь CSS?
почему бы вам не использовать скрытую видимость для обеих задач в условии if
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы используете оператор присваивания = вместо оператора равенства == или ===.
Вместо этого я предлагаю вам попытаться создать более общую функцию, чтобы добавить N задач с помощью кнопки
Пытаться
<style>
.task-row {
visibility: hidden;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, visibility 0.3s ease-out;
margin-bottom: 10px;
}
</style>
<body>
<button id = "add-another-task-button">Add Task</button>
<div id = "task-container">
<!-- Tasks will be created dynamically -->
</div>
<script>
let taskCount = 0;
function addNewTask() {
taskCount++;
const taskContainer = document.querySelector("#task-container");
const newTask = document.createElement("div");
newTask.id = `task-${taskCount}-row`;
newTask.className = "task-row";
newTask.innerHTML = `Task ${taskCount}: <input type = "text">`;
taskContainer.appendChild(newTask);
// Make new task visible
setTimeout(() => {
newTask.style.visibility = "visible";
newTask.style.maxHeight = "80px";
}, 0);
}
document.addEventListener("DOMContentLoaded", (event) => {
let nextInputTask = document.querySelector("#add-another-task-button");
nextInputTask.addEventListener("click", addNewTask);
});
</script>
Этот подход поможет создать любое количество задач с помощью CTA «Добавить задачу».
Ага, понятно! Я думаю, это то, что Paulie_D предложил выше: вводить новый элемент при каждом нажатии кнопки - и вы предоставили здесь весь формат. Я принимаю это как лучший ответ и думаю, что создам эту функцию с использованием рекомендованного вами подхода, чтобы ее было легче масштабировать до более чем трех элементов «Новая задача» (спасибо @trincot за указание на это!) . Спасибо, Ашиш Ядав!
Просто чтобы определить, почему ваш if..else не работает:
Вы проверяете task2.style.visibility, но этот стиль так и не был установлен. Вместо этого у вас есть класс CSS, который применяется к этому элементу, но это не одно и то же. Чтобы узнать, как все применимые стили CSS влияют на видимость task2, вы можете использовать getComputedStyle. Тогда это сработает.
Еще одно замечание: в случае else вы уже знаете, что task2 виден, поэтому нет необходимости еще раз явно проверять это.
Итак, измените это:
if ((task2.style.visibility === "hidden")) {
task2.style.visibility = "visible";
task2.style.maxHeight = "80px";
} else if (
(task2.style.visibility === "visible") &&
(task3.style.visibility === "hidden")
) {
task3.style.visibility = "visible";
task3.style.maxHeight = "80px";
}
к этому:
if ((getComputedStyle(task2).visibility === "hidden")) {
task2.style.visibility = "visible";
task2.style.maxHeight = "80px";
} else if (getComputedStyle(task3).visibility === "hidden") {
task3.style.visibility = "visible";
task3.style.maxHeight = "80px";
}
Но, как уже отмечалось, на самом деле это не масштабируемый подход. Кроме того, такая игра с maxHeight действительно показывает, что вы хотите использовать свойство display, а не visibility. Обратите внимание, что display принимает разные значения, поэтому обязательно посмотрите.
Спасибо, что вернулись к этому! Я оставлю getComputedStyle в своем наборе инструментов на будущее, а сейчас я изменил свой код на что-то более простое для масштабирования в будущем. Что касается свойства видимости и отображения, то, к сожалению, это требование проекта, над которым я работаю, хотя я могу вернуться и изменить его, как только оно будет рассмотрено. Еще раз большое спасибо!
=— присвоение,===— сравнение.