JQuery challenge - draw tally marks on click event [closed]

问题

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.

These are tally marks:

1       2          3              4                 5
▼       ▼          ▼              ▼                 ▼

Tally marks example

The following example has a tally mark count of 83: enter image description here

Challenge Rules:

Must use JQuery & HTML 5.
Tally marks must be added to a container, not the body.
The container where you draw the tallies must grow to accommodate new tallies.
Sprite or CSS3 for the actual tick mark is up to you. Feel free to use the first image as your sprite :)
Increment ONLY - no need to remove tallies. Once they are scratched into a prison cell wall, they are there for life!
Must post a link to a working demo on http://jsfiddle.net/
Have fun!

回答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

回答2:

Given the requirements, I've decided to use an ol as the container:

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;
}

With the following jQuery:

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

JS fiddle demo.

来源：https://stackoverflow.com/questions/7060015/jquery-challenge-draw-tally-marks-on-click-event

标签

jquery

css