我是前端开发的新手。我正在使用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');
});