如何撤消 html 表中的类更改

Question

当我尝试undo改变班级时，我遇到了一些问题。

我可以获取clicked元素，但我想要的结果是获取class changed元素和undo它。

例如，在我的代码片段中，我想undo同时更改所有课程。

换句话说，我想获得class changedelement array。

有什么方法吗？

谢谢

let clicked=[];

$(function() {

  $("td").click(function() {

    $(this).nextAll(':lt(4)').addClass('color');

     let clickedID=$(this).attr('id');

     clicked.push(clickedID);

});

});

$(function() {

  $("#btnCancel").on('click',() => {

    if(clicked.length) {

      let lastClicked = clicked.pop();

      $(`td#${lastClicked}`).removeClass();

    }

  });

  });

table td {

  width: 20px;

  overflow: hidden;

  display: inline-block;

  white-space: nowrap;

  border: 1px solid gray;

  text-align: center;

  padding: 5px;

  cursor: pointer;

}

.color {

  background-color: hsl(60,100%,60%);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

<tr>

<td id=1>1</td>

<td id=2>2</td>

<td id=3>3</td>

<td id=4>4</td>

<td id=5>5</td>

<td id=6>6</td>

<td id=7>7</td>

<td id=8>8</td>

<td id=9>9</td>

</tr>

</table>

<button id="btnCancel">undo</button>

Answer 1

.removeClass([className])从匹配元素集中的每个元素中删除单个类、多个类或所有类。$('td#${lastClicked}').nextAll(':lt(4)').removeClass('color');将返回最后选择/更新的元素。let clicked = [];$(function() {  $("td").click(function() {    $(this).nextAll(':lt(4)').addClass('color');    let clickedID = $(this).attr('id');    clicked.push(clickedID);  });});$(function() {  $("#btnCancel").on('click', () => {    if (clicked.length) {      let lastClicked = clicked.pop();      $(`td#${lastClicked}`).nextAll(':lt(4)').removeClass('color');    }  });});table td {  width: 20px;  overflow: hidden;  display: inline-block;  white-space: nowrap;  border: 1px solid gray;  text-align: center;  padding: 5px;  cursor: pointer;}.color {  background-color: hsl(60, 100%, 60%);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table>  <tr>    <td id=1>1</td>    <td id=2>2</td>    <td id=3>3</td>    <td id=4>4</td>    <td id=5>5</td>    <td id=6>6</td>    <td id=7>7</td>    <td id=8>8</td>    <td id=9>9</td>  </tr></table><button id="btnCancel">undo</button>