我是前端开发的新手。我正在使用HTML,CSS和jquery创建一些框。我想在单击它们时将框的颜色更改为蓝色。单击所有框并更改颜色(变为蓝色)后,我要按与单击框相反的顺序撤消框的蓝色(更改期间框不可单击)。撤消所有框后,框应再次变为可单击状态。谢谢您的帮助。

问题编辑:
我在html,css和jquery中创建了几个框。单击该框后,它的颜色会改变。在将所有框都更改为蓝色之后,我要以与单击框相反的顺序撤消它们的蓝色。谢谢。

编辑:
到目前为止,我已经创建了框,并且可以单击框并将其颜色更改为蓝色。但是我需要有关撤消部分的帮助。
我从事过Jquery代码。有人可以检查错误吗?

最佳答案

我认为您只是想指出正确的方向,所以...

如前所述,将内联样式放入星级类中:

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


可...

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


这只是整理HTML一点,使其更易于维护。

接下来,您需要记录单击框(divs)的顺序。为此,您需要识别它们。一种方法是为每个广告添加唯一的ID。

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


现在,在您的JS代码中,您将需要...

1)记录单击时的每个ID(框)(到数组中)

2)检查阵列的长度,如果已满(等于盒子总数),则可以按相反的顺序撤消着色

3)以相反的顺序浏览列表,取消上色。您可能会想使用setTimeout()在撤消它之间放置一个延迟(否则JS会太快而无法注意到,它们会同时发生),并可能使用过渡来淡出颜色(看起来比瞬时变化)。

代码中棘手的部分将处理如果单击已被单击的框(您可以检查数组,如果该ID已经存在然后退出并不执行任何操作),并在撤消阶段禁用单击((称为disableClick的全局变量,撤消时将其设置为true,而onclick则将其选中,如果为true,则不执行任何操作。

代码中有很多工作要做...

$('.star').click(function(){
  // check if in undo phase, exit if true
  // check if box already clicked, exit if true
  // get current box id and add to array
  // check if array is full and initiate undo phase if it is
  $(this).toggleClass('clicked');
});

07-24 09:46
查看更多