如何統計頁面中所有div的點擊次數？

Question

我正在使用php腳本，用戶點擊表格的單元格以顯示其內容。作爲我的項目的一部分，用戶不能點擊100個以上的單元。我想在頁面頂部顯示每次點擊div時會發生變化的倒計時。

該頁面包含一個表格，表格的每個單元格包含一個帶有諸如「a1_cont」，「a2_cont」，「a3_cont」，...，「a10_cont」等ID的第一行的DIV。第二行是「b1_cont」到「b10_cont」，依此類推。

我需要從20開始的倒計時，並且一旦用戶點擊了20次，就會逐漸下降到0。你會如何建議我這樣做？

這是表中的一行。不要對我大喊CSS，這是由我的研究領域廣泛使用的mouselab web腳本自動生成的。

<TR style="background-color: green;"> 
<!--cell a0(tag:a0)--> 
<TD align=center valign=middle><DIV ID="a0_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a0_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a0_td" align=center valign=center width=95 height=45 class="actTD">2 years</TD></TABLE></DIV><DIV ID="a0_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a0_tdbox" align=center valign=center width=95 height=45 class="boxTD">Years in Business</TD></TABLE></DIV><DIV ID="a0_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><A HREF="javascript:void(0);" NAME="a0" onClick="ShowCont('a0',event)"><IMG NAME="a0" SRC="transp.gif" border=0 width=100 height=50></A></DIV></DIV></TD> 
<!--end cell--> 
<!--cell a1(tag:a1)--> 
<TD align=center valign=middle><DIV ID="a1_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a1_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a1_td" align=center valign=center width=95 height=45 class="actTD">7 min</TD></TABLE></DIV><DIV ID="a1_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a1_tdbox" align=center valign=center width=95 height=45 class="boxTD">Call Handling Time</TD></TABLE></DIV><DIV ID="a1_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><A HREF="javascript:void(0);" NAME="a1" onClick="ShowCont('a1',event)"><IMG NAME="a1" SRC="transp.gif" border=0 width=100 height=50></A></DIV></DIV></TD> 
<!--end cell--> 
<!--cell a2(tag:a2)--> 
<TD align=center valign=middle><DIV ID="a2_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a2_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a2_td" align=center valign=center width=95 height=45 class="actTD">Very High</TD></TABLE></DIV><DIV ID="a2_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a2_tdbox" align=center valign=center width=95 height=45 class="boxTD">Representative Experience</TD></TABLE></DIV><DIV ID="a2_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><A HREF="javascript:void(0);" NAME="a2" onClick="ShowCont('a2',event)"><IMG NAME="a2" SRC="transp.gif" border=0 width=100 height=50></A></DIV></DIV></TD> 
<!--end cell--> 
<!--cell a3(tag:a3)--> 
<TD align=center valign=middle><DIV ID="a3_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a3_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a3_td" align=center valign=center width=95 height=45 class="actTD">$0.17</TD></TABLE></DIV><DIV ID="a3_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a3_tdbox" align=center valign=center width=95 height=45 class="boxTD">Cost per Minute</TD></TABLE></DIV><DIV ID="a3_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><A HREF="javascript:void(0);" NAME="a3" onClick="ShowCont('a3',event)"><IMG NAME="a3" SRC="transp.gif" border=0 width=100 height=50></A></DIV></DIV></TD> 
<!--end cell--> 
<!--cell a4(tag:a4)--> 
<TD align=center valign=middle><DIV ID="a4_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a4_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a4_td" align=center valign=center width=95 height=45 class="actTD">Strong Encryption</TD></TABLE></DIV><DIV ID="a4_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a4_tdbox" align=center valign=center width=95 height=45 class="boxTD">Customer Data Security</TD></TABLE></DIV><DIV ID="a4_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><A HREF="javascript:void(0);" NAME="a4" onClick="ShowCont('a4',event)"><IMG NAME="a4" SRC="transp.gif" border=0 width=100 height=50></A></DIV></DIV></TD> 
<!--end cell--><TD ID="btn_0" style="border-left-style: none; color: white;border-right-style: none; border-bottom-style: none;" align=center valign=middle><INPUT type="radio" name="mlchoice" value="btn1" onMouseOver="timefunction('mouseover','btn1','Alpha Co')" onClick="recChoice('onclick','btn1','Alpha Co')" onMouseOut="timefunction('mouseout','btn1','Alpha Co')">Alpha Co</TD> 
</TR> 

Answer 1

沒有看到實際的HTML，這是一個選擇，將滿足所有的div元素的最佳猜測。

(function() { 
    var count = 20; 
    var counted = {}; 
    $("div[id$='_cont']").click(function() { 
     // only count this click if we haven't already counted this div 
     if (!counted[this.id]) { 
      counted[this.id] = true; 
      --count; 

      // update on screen counter here 

      if (count == 0) { 
       // max clicks reached 
       // do whatever you want here 
      } 
     } 
    }); 
})(); 

請注意，這是寫入只計算一個給定的div點擊一次，因此一個div中的多個點擊只會計數一次。

Answer 2

var count = 20; 

$('div').click(function(){ 

    count = count - 1; 

    if (count==0) 
     alert('Youre done!') 

});