Question

我是JavaScript的初学者，我需要为孩子做一个测试。我有3个方格，我需要检查并显示是否按照“订单”属性定义的特定顺序点击了它。单击的验证显示在相应的span元素status-1上，单击no。 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 demo

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>

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

2 个答案: