使用else if通过JavaScript实现元素分步显示的问题排查

编辑： 感谢各位！问题已解决。这是我在StackExchange的第一个问题，大家的回复既迅速又有深度，非常感谢。

我正在开发一个带有“添加另一个任务”按钮的页面，希望每次点击按钮时，将一个隐藏元素的CSS属性从hidden改为visible，从而在页面上新增一行输入框。目前我能实现所有元素同时显示，但想要实现逐行显示的效果。

以下是我目前编写的代码。根据我在StackExchange上查阅的帖子，else if语句似乎是最合适的选择，但第一次点击按钮时，两个隐藏行（task2和task3）会同时显示。请问我是不是用错了条件语句？或者需要将这些语句放在showNextTask函数内部的独立函数中？希望能得到大家的帮助！

现有JavaScript代码 #

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);

Task 2的HTML代码（Task 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;
}

问题原因 #

核心问题是element.style.visibility只能读取行内样式，而你初始的visibility: hidden是写在外部CSS样式表里的，所以初始状态下task2.style.visibility是空字符串，并不等于"hidden"。这导致第一次点击按钮时第一个if条件不成立，直接进入else if分支，同时显示了task3。

修复方案 #

有两种简单的修复方式：

方式一：使用getComputedStyle获取实际生效的样式

function showNextTask() {
    let task2 = document.querySelector("#task-2-row");
    let task3 = document.querySelector("#task-3-row");
    // 获取元素实际生效的样式
    const task2Visible = getComputedStyle(task2).visibility === "visible";
    const task3Visible = getComputedStyle(task3).visibility === "visible";

    if (!task2Visible) {
        task2.style.visibility = "visible";
        task2.style.maxHeight = "80px";
    } else if (!task3Visible) {
        task3.style.visibility = "visible";
        task3.style.maxHeight = "80px";
    }
}

方式二：用CSS类控制显示状态（更推荐，便于维护）

1. 修改CSS，新增控制显示的类：

.task-row {
    visibility: hidden;
    max-height: 0;
    transition: max-height 0.2s ease; /* 可选，添加过渡动画 */
}
.task-row.show {
    visibility: visible;
    max-height: 80px;
}

2. 给HTML中的task2、task3添加task-row类：

<div id="task-2-row" class="task-row">...</div>
<div id="task-3-row" class="task-row">...</div>

3. 修改JavaScript代码，通过类控制显示：

function showNextTask() {
    // 获取所有未显示的任务行
    const hiddenTaskRows = document.querySelectorAll(".task-row:not(.show)");
    if (hiddenTaskRows.length > 0) {
        hiddenTaskRows[0].classList.add("show");
    }
}

这种方式的优势是后续新增任务行时，无需修改JavaScript代码，直接添加带task-row类的元素即可，扩展性更强。

内容的提问来源于stack exchange，提问作者J Park