如何计算使用Javascript删除的气泡？

Question

我有一堆气泡，我可以点击它们，然后用我写的javascript代码删除它们。我现在正在尝试弄清楚如何让它在每次删除气泡时都进行计数。下面是html和javascript：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bubbles</title>
<link href="bubbles.css" rel="stylesheet">
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/bubbles.js"></script>
<script src="scripts/java.js"></script>
</head>

<body>
<!--background bubbles-->
<div id="b-blue" class="b" data-speed="1"></div>
<div id="b-green" class="b" data-speed="2"></div>
<div id="b-red" class="b" data-speed="4"></div>

<!--bubble text-->
<div id="bText">
    B<br />U<br />B<br />B<br />L<br />E<br />S<br />!
</div>

<!--bubble game-->
<div id="bubbleGame">
    <!-- <div class="bubble"></div> -->
</div>

<!--bubble score and reset-->
<div id="bottomCorner">
    <div id="reload">refresh...</div>
    <div id="score">0</div>
</div>
</body>
</html>

删除气泡的Javascript

$(document).ready(function() {
$("#bubbleGame").on("click", ".bubble", function deleteb() {
$(this).remove();
})
})

每次我删除一个气泡，我都想在"score“div中添加一个。所有的气泡都在带有".bubble“类的"buublegame”div中，我知道我用过jquery，但如果不用jquery的话会更好。也可以在点击刷新按钮后，用20个气泡重新进货页面。

Answer 1

$("#bubbleGame").on("click", ".bubble", function deleteb() {
    $(this).remove();
    $('#score').text( parseInt( $('#score').text() ) + 1 ); 
})

jsfiddle

Answer 2

下面是一些闭包练习：

function make_counter () {
    var i=0;
    return function () {
        i++;
        $('#score').text(i);
    }
}

$(document).ready(function() {
    counter = make_counter();
    $("#bubbleGame").on("click", ".bubble", function deleteb() {
        $(this).remove();
        counter();
    })
})

在JSFiddle here上演示。

编辑

对于重置功能，我采用了一种稍微不同的方法：

$(document).ready(function() {
    var counter = {
        i: 0,
        incr: function () {
            this.i++;
            this.update();
        },
        reset: function () {
            this.i = 0;
            this.update();
        },
        update: function () {
            $('#score').text(this.i);
        }
    }

    $("#bubbleGame").on("click", ".bubble", function deleteb() {
        $(this).remove();
        counter.incr();
    });

    $("#reload").click(function () {        
        var i;
        $("#bubbleGame .bubble").remove();        
        for (i = 0; i < 20; ++i) {
            $("#bubbleGame").append($("<div class='bubble'>"));
        }
        counter.reset();
    });
});

JSFiddle for this one