Javascript 检查元素是否按特定顺序单击

我是JavaScript的初学者，我需要为孩子们做一个测试。 我有3个正方形，我需要检查并显示它是否按“order”属性定义的特定顺序单击。单击验证显示在对应的跨度元素状态-1（单击编号1）、状态-2（单击编号2）和状态-3（单击编号3）上 这是我的html代码

<div class="square blue" order="3">
</div>
<div class="square yellow" order="2">
</div>
<div class="square red" order="1">
</div>
<br class="clearBoth" />
<span id="status-1"></span>
<span id="status-2"></span>
<span id="status-3"></span>

感谢您的帮助

使用此

var click_numbers = 0;
$('.square').on('click',function(){
    click_numbers ++;
    if (click_numbers == $(this).attr('order')){
        $('#status-'+click_numbers).html('OK');
    }
    else
    {
         $('#status-'+click_numbers).html('NOT OK');
    }
    if (click_numbers === 3){
        click_numbers=0;
    }
});

---

我认为您正在尝试实现JavaScript的冒泡和捕获阶段。看看这里的例子。

如果您测试的是儿童智能，html应该如下所示

<div class="square blue" order="3">
    <div class="square yellow" order="2">
       <div class="square red" order="1">
       </div>
    </div>
</div>

感谢您的演示。这就是我想要的。可能是一个要实现的解决方案，但是UI不是很好，我需要单独的div元素

<div class="square blue" order="3">
    <div class="square yellow" order="2">
       <div class="square red" order="1">
       </div>
    </div>
</div>