javascript - 单击其中的链接时隐藏 div

Question

我的代码是这样的:

<div id="box">
    <a href="delete">delete</a>
</div>
<div id="box">
    <a href="delete">delete</a>
</div>
<div id="box">
    <a href="delete">delete</a>
</div>

我想在点击其中的链接时隐藏第一个 div，第二个和第三个 div 也一样。有什么办法可以在不更改这段代码的情况下做到这一点吗？

Answer 1

是的。

您在页面的其他地方创建 JavaScript，它:

1. 定义一个 onclick 处理函数“deleteMe()”

   • 该函数将有权访问 this 指向 <a> 的变量单击的 DOM 元素。

   • 您可以从 DOM 向上移动到父元素，以找到正确的 box div DOM 元素

   • 然后从 block 更改该框 div 的样式至 hidden

2. 然后你的 JS 应该用 ID="box" 遍历每个元素(我不认为你可以用 getElementById() 做到这一点，所以你可能需要循环遍历包含节点的 DOM 子节点)。对于每个盒子 DIV:

   • 通过 firstChild() 在 DOM 中找到它的第一个 child - 这将是 <a> DOM 元素。

   • 将上面的 onclick 处理程序函数“deleteMe()”分配给 <a> DOM 元素。

---

请注意，我建议修改 HTML 使其具有唯一 ID。您不必让它们独一无二，但最好是设计明智。

您使用重复 ID 的目的应该通过类来处理。