选择特定的兄弟元素

Question

在我的应用程序中，我想在单击它时获取任务更新元素的兄弟元素，然后更改它们的类。

HTML：

<template id="template-task">
    <li>
        <span id="task-title"></span>
        <input id="task-title-input" class="hide">
        <span id="task-text"></span>
        <input id="task-text-input" class="hide">
        <span id="task-update">Update</span>
        <span id="task-save" class="hide">Save</span>
        <span id="task-del">Delete</span>

    </li>
</template>

JS：

this.closest("#task-text").classList.add("hide");
this.closest("#task-text-input").classList.remove("hide");
this.closest("#task-title").classList.add("hide");
this.closest("#task-title-input").classList.remove("hide");
this.closest("#task-save").classList.remove("hide");

遗憾的是，这个解决方案对我不起作用。根据我的阅读，这是因为closest 仅查找父元素。还有另一种方法吗？用nextSibling、prevSibling 选择这些项目对我来说看起来不太好。

Answer 1

如果您获得父节点，则可以访问其子节点。