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

Question

我是JavaScript的初学者，我需要为孩子们做一个测试。我有3平方，我需要检查和显示，如果这是按一个特定的顺序，定义为“订单”属性。单击的验证显示在相应的span元素状态- 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>

我在点击验证时卡住了

$('.square').on('click',function(){
    // check if click is ok or not and display 
}

谢谢你的帮助

Answer 1

使用这个

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;
    }
});

JSFiddle演示

Answer 2

我认为您正在尝试实现JavaScript的冒泡和捕获阶段。看看这里的例子。http://javascript.info/tutorial/bubbling-and-capturing

如果您正在测试子程序智能，则html应该如下所示

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