jQuery挑战-在点击事件上绘制提示标记 [英] JQuery challenge - draw tally marks on click event

问题描述

挑战:
将点击事件分配给将在容器内绘制提示标记的内容.理货标记应尊重已经绘制的其他理货标记，以便理顺标记的位置.每次点击后，计数标记应代表到目前为止的总点击次数.

The Challenge:
Assign a click event to something which will draw a tally mark inside a container. The tally mark should respect other tally marks already drawn so the positioning of the tally marks makes sense. After every click, tally marks should represent total number of clicks thus far.

这些是计数标记:

1       2          3              4                 5
▼       ▼          ▼              ▼                 ▼

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

The following example has a tally mark count of 83:

挑战规则:

• 必须使用JQuery&HTML5.
• 标记必须添加到容器中，而不是主体中.
• 绘制标记的容器必须增加以容纳新的标记.
• 实际刻度号的Sprite或CSS3由您决定.随意使用第一张图片作为精灵:)
• 仅递增-无需删除计数.一旦将它们划入监狱牢房的墙，它们就将在那里生活！
• 必须在 http://jsfiddle.net/
上发布指向有效演示的链接.
• 玩得开心！

推荐答案

正在运行的演示

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

演示

这篇关于jQuery挑战-在点击事件上绘制提示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！