javascript - 从 DOM 中移除上一次点击

Question

我有一个 5 dt 标签，带有不同的 id 和 span 标签。每个跨度标签都有相同的图像。例如：

我在每个 dt 下都有一个保存图标。当用户点击它时 - 它变为非保存图标。

现在，如果我在第一个 dt 上并单击保存图标，它会更改为非保存，那很好。当我转到第二个 dt 并单击它的保存图标时，它会更改为非保存图标，它也可以，但我需要删除第一个 dt 中的非保存图标并更改为保存图标。

有人知道吗？

Answer 1

我不知道您的代码是什么样的，但也许以下内容会对您有所帮助： HTML：

<table>
  <tr id="buttons">
    <td></td><td></td><td></td>
  </tr>
</table>

CSS：

.safe {
  background: url(../safe.jpg) no-repeat 0 0;
}
.non-safe {
  background: url(../unsafe.jpg) no-repeat 0 0;
}

JavaScript：

var buttons = document.getElementById("buttons").getElementsByTagName("td"),
    i = 0,
    len = buttons.length;

for ( ; i < len; i++) {
  buttons[i].addEventListener("click", function() {
    for (i = 0; i < len; i++) {
      var button = buttons[i];
      if (button === this) { this.className = "safe";
      } else { button.className = "non-safe"; }
    }
  }, false);
}

您还可以搜索“事件委托”以获得更高级的技术：

为 td 元素的共同祖先元素添加一个监听器，而不是每个添加一个监听器。