按与单击相反的顺序撤消框的颜色更改（使用HTML、CSS、Jquery）

我是前端开发的新手。我正在使用HTML、CSS和jquery创建一些框。我想在单击方框时将其颜色更改为蓝色。单击所有框并更改颜色（为蓝色）后，我希望按与单击相反的顺序撤消框的蓝色（更改期间不应单击框）。撤消所有框后，框应再次可单击。谢谢你的帮助

问题编辑： 我已经用html、css和jquery创建了几个框。单击该框后，其颜色会发生变化。在所有框都更改为蓝色后，我想按与单击相反的顺序撤消框的蓝色。谢谢

编辑： 到目前为止，我已经创建了框，我可以单击框并将其颜色更改为蓝色。但我需要一些帮助来解决问题。

---

我已经编写了Jquery代码。有人能检查一下错误吗

我想你只是想被指向正确的方向，所以

如前所述，将内联样式放入star类：

style="border:1px solid #000;"

可能是

.star {
  width: 100px;
  height: 100px;
  border:1px solid #000;
}

这只是稍微整理一下HTML，使其更易于维护

接下来，您需要记录框（div）被点击的顺序。要做到这一点，您需要识别它们。这样做的一种方法是为每一个都添加一个唯一的ID

<div class="star" id="box1"> </div>
<div class="star" id="box2"> </div>
etc

---

正如Quantumplate所说，但将其用作事件处理程序

 $('.star').click(function(){
  $(this).toggleClass('clicked');
 });

到

---

当类被删除时，它将变得不可访问，当它被添加回时，可以单击它，而无需编写更多代码来添加处理程序。

这看起来非常正确。您的代码没有显示出实际做这件事的努力。您编写的代码看起来很好。（没有查看标记，但我看到很多内联样式最好移到样式表中。）继续。如果你被击中了，作为一个关于你被卡住的具体问题。“但我需要一些帮助来解决问题。”这是什么方面？什么时候触发？如何按顺序撤消它们？首先，如何跟踪订单？谢谢您的回复。我如何跟踪订单？然后如何撤销它们？你想做什么。非常感谢Quantumplate:）1）如前所述，将内联样式放在你的star类中。2） 你有很多重复，这通常是你可以简化事情的一个标志，对于你的事件处理程序，你只需要一个而不是每个div一个，例如$（'.star'）。单击（function（）{…}3）你同样可以将你的大if（arr[i]=“1”）{语句减少到几行（每一个都在做同样的事情，只是一个不同的div编号。一旦你简化了这些，阅读和理解就会容易得多。

 $('.star').click(function(){
  $(this).toggleClass('clicked');
 });

 $('div').delegate(".star","click", function(){
  $(this).toggleClass('star');

 });