JQuery挑戰 - 在單擊事件中繪製標記點

Question

挑戰：
將點擊事件分配給將在容器內繪製標記標記的內容。理貨標記應該尊重已經繪製的其他理貨標記，因此理貨標記的位置是合理的。每次點擊後，理貨標記應代表到目前爲止的總點擊次數。

這些計數符號：

1  2   3    4     5 
▼  ▼   ▼    ▼     ▼ 

下面的示例具有83計數符號計數：

挑戰規則：

• 必須使用JQuery & 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。