Jquery中元素数据属性的奇怪问题

Question

我的案子中有一个非常奇怪的问题

我想检测点击框的总数

我的代码如下

我有100个divs，其类名为.unit。

$('.unit).click(function(){
    $(this).attr('data-boxcolor','green')
})

//submit button
$('#submit-btn').click(function(){
        checkAnswer()
 })

//remove all the attribute and start over
 $('#clear-btn').click(function(){
      $('.unit').removeAttr('data-boxcolor')
 })


function checkAnswer(){
        var greenCount=0
        var colorLimit=4;

    $('.unit').each(function(){
    var t = $(this).data('boxcolor')

    switch(t){
    case 'green':
                greenCount++;                 
    break;
    ….MORE...   
     default:
    }

    if(greenCount > colorLimit){
        alert('too many boxes)
    }
  }

当我第一次选择4个以上的盒子时，会弹出正确的警告框。但是，在我点击clear-btn后，即使只选择1个框，“too many boxes”警告仍会显示。我根据数据属性检查单击的框，我不确定为什么会发生这种情况。有人可以帮我解决一下吗？非常感谢！