JQuery挑战 - 在点击事件上绘制计数标记

Question

挑战:
将点击事件分配给将在容器内绘制标记的东西.计数标记应该与已经绘制的其他计数标记相对应,因此计数标记的定位是有意义的.每次点击后,计数标记应代表到目前为止的总点击次数.

这些是理货标记:

1       2          3              4                 5
?       ?          ?              ?                 ?

以下示例的计数标记计数为83:

挑战规则:

• 必须使用JQuery和HTML 5.
• 必须将Tally标记添加到容器中,而不是正文中.
• 绘制标签的容器必须增长以容纳新的标签.
• 实际刻度线的Sprite或CSS3取决于您.随意使用第一个图像作为你的精灵:)
• 仅限增量 - 无需删除标签.一旦他们被划入监狱牢房墙壁,他们就会终生存在!
• 必须在http://jsfiddle.net/上发布一个工作演示的链接
• 玩得开心!

Answer 1

鉴于要求,我决定使用an ol作为容器:

HTML:

<button id="tally">add another</button>
<ol id="count">
</ol>

CSS:

li {
    display: inline-block;
    height: 20px;
    border: 2px solid #000;
    margin: 0 2px 0 0;
}

li:nth-child(5n) {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    height: 30px;
    position: relative;
    left: -15px;
    top: 5px;
    margin-right: 10px;
}

使用以下jQuery:

$('#tally').click(
    function(){
        $('<li />').prop('class','tally').appendTo('#count');
        return false;
    });

JS小提琴演示.

Answer 2

工作演示

$.fn.tallier = function () {
    var $this = this,
        bgUrl = 'http://i.stack.imgur.com/96hvp.png',
        bgHeight = 125,
        bgVals = [
            [45, 25], // width, background-position X
            [65, -35],
            [85, -115],
            [105, -215],
            [140, -360]
        ],
        count = 0;

    $this.click(function(e) {
        count++;

        // add new tally box every 5th
        if (count%5 == 1) {
            var $newTally = $('<div>').addClass('tally');
            $newTally.css({
                          background: 'url("' + bgUrl + '") ' +
                            bgVals[0][1] + 'px 0 no-repeat transparent',
                          float: 'left',
                          width: bgVals[0][0] + 'px',
                          height: bgHeight + 'px'
                      });
            $this.append($newTally);
        }

        // change background position and width for new tally
        var $lastTally = $this.find('.tally:last'),
            i = count%5 - 1;
        i = i < 0 ? 4 : i;
        $lastTally.css({
            'background-position': bgVals[i][1] + 'px 0',
            width: bgVals[i][0] + 'px'
        });
    });
};

// invoke
$('#tally').tallier();
$('#tally').click();

演示