JavaScript - 单击另一个元素后将元素恢复为原始样式

Question

所以我正在构建一个日历程序，我希望用户能够选择一天。使用 <table> , <td>通过应用 className="NewStyle" 单击时突出显示到盒子。我希望该单元格在单击另一个单元格后恢复正常，但它只是保持其新样式。

当点击另一个单元格时，如何让 JS 将任何未点击的单元格恢复正常？

这是一个 JSFiddle .感谢您的帮助!

HTML

单元格是这样的:

<td id="td_4" onclick="change(4)">4</td>
<td id="td_5" onclick="change(5)">5</td>
<td id="td_6" onclick="change(6)">6</td>

点击 td_4将成功更改样式。但是点击td_6也会成功换样式，但留下td_4以其新样式而不是还原它。

JavaScript

function change(x) {
    document.getElementById("td_" + x).className = "selected";
}

Answer 1

只需跟踪您单击的元素并将其取消分类。 fiddle

var previousEl
function change(x) {
  if (previousEl) previousEl.className = ""
  previousEl = document.getElementById("td_" + x)
  previousEl.className = "selected"
}

更新:另一件值得一提的事情是，您可以利用事件冒泡，以便您的父容器可以监听事件，从事件对象中获取被点击元素的 ID。 updated fiddle

var previousEl
function change(event) {
  if (previousEl) previousEl.className = "";
  previousEl = document.getElementById(event.target.id)
  previousEl.className = "selected";
}

并在您的 html 中删除所有 <td onclick="change()">并将其放在父对象上，传递事件:

<table onclick="change(event)">