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

Question

我是 JavaScript 的初学者，我需要为 children 做一个测试。我有 3 个正方形，我需要检查并显示它是否按特定顺序单击，由 "order" 属性定义。单击的验证显示在相应的 span 元素 status-1 上，用于单击编号。 1, status-2 代表点击次数2 和 status-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 demo

Answer 2

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

如果你正在测试 children 明智，html 应该看起来像这样

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

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

Check if elements clicked in a specific order

javascript

validation

jquery

click