Question

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

这些是理货标记：

1       2          3              4                 5
▼       ▼          ▼              ▼                 ▼

Tally marks example

以下示例的计数标记计数为83： enter image description here

挑战规则：

必须使用JQuery＆amp; HTML 5.
必须将Tally标记添加到容器中，而不是身体。
您绘制标签的容器必须长大以容纳新的标签。
实际刻度线的精灵或CSS3取决于您。随意使用第一个图像作为你的精灵：）
仅限增量 - 无需删除标签。一旦他们被划入监狱牢房墙壁，他们就会终生存在！
必须在http://jsfiddle.net/
玩得开心！

Answer 1

Working demo

$.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();

Demo

Answer 2

根据要求，我决定使用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 fiddle demo

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

2 个答案: