2011-09-21 28 views
0

對不起,這個新手問題,請耐心等待;)我仍在學習JavaScript/jQuery。JavaScript/jQuery Track圖片按鈕點擊次數

我的目標是確保用戶只會點擊圖像按鈕一次(以避免由於重複表單提交而造成重複值)。

下面是我會做的方法:

由於按鈕是一個形象,我不能就這樣第一個按鈕,點擊後禁用它。我可以隱藏圖像按鈕,但我不認爲這是一個好主意,因爲用戶可能想知道按鈕發生了什麼。所以我認爲我可以在JavaScript中創建一個全局變量來跟蹤用戶點擊重複瀏覽器標籤上的按鈕多少次。

這裏是我的示例代碼:

HTML

<html> 
    <head><title>Global Variable Test 1</title></head> 
    <body> 
      <script type="text/javascript" src="clickCount.js"></script> 
      <a href="#" onClick="countClicks();"><img src="arrow.gif" /></a> 
    </body> 
</html> 

的JavaScript

<!-- hide script from old browsers 
    var counter = 0; 
    function countClicks() { 
     counter++; 
     if(counter > 1) 
     alert("Waah, stop clicking!"); 
     else 
     alert('Number of clicks:' + counter); 
    } 
// end hiding script from old browsers --> 

嗯,我能指望在一個頁面上,但如果點擊的次數我在同一頁面上打開兩個選項卡,我似乎無法在下一頁「共享」我的變量(即當我點擊第一個標籤上的圖像按鈕並在第二個標籤中再次點擊它時,點擊次數應該是2而不是1)。所以我的問題是:我怎樣才能在JavaScript中創建一個全局變量,可以是跨瀏覽器標籤共享?有沒有更好的方法來確保用戶只能點擊一次圖像按鈕?

任何幫助將非常感激。

TIA。

+0

您可以通過'localstorage'共享數據。保存在一個標籤中,並將其另存爲 –

+0

@ant_Ti Localstorage?你能解釋一下嗎?謝謝。 –

+0

[請閱讀本文](http://paperkilledrock.com/2010/05/html5-localstorage-part-one/) –

回答

3

我的目標是確保用戶只會點擊圖像按鈕一次(以避免由於重複表單提交而產生重複值)。

使用如下語句:

$('#mybuttonid').one("click", function() { 
     //my action on click here 
    }); 

它會觸發click事件只有一次

我怎麼能在JavaScript中創建一個全局變量,可以跨瀏覽器標籤共享?

你不行。您可以改用Cookie。

+0

感謝您的快速回復。它不工作。請參閱http://jsfiddle.net/annelagang/szHgJ/ –

+0

是的,首先 - 您沒有在左側面板上選擇jQuery框架,其次 - 它是我樣本中的錯字:'finction - > function'。 – Samich

+0

這裏是工作之一:http://jsfiddle.net/szHgJ/3/ – Samich

0

我認爲一個更好的策略是禁用圖像按鈕IMO。 您可以使其出現被禁用(淡出,無響應),但不會實際刪除它 - 即淡入淡出並忽略隨後的點擊。

例子:

$('#yourButton').click(function(e){ 
    $(this).fadeTo(0.5); 
    $.get("someURL", {buttonClick:1}); 
    $(this).unbind().bind('click', function(e){ 
     e.preventDefault(); 
    }); 
}); 

編輯: 要創建全局變量,AFAIK你不能這樣做跨瀏覽器標籤 - 相反,你應該存儲在會話中。您可以使用一些PHP或其他任何方法來執行此操作,並在點擊按鈕時使用AJAX查詢它(請參閱修訂示例)。

+0

我喜歡你的「淡出」形象想法。實際上,我爲這個應用程序使用了ASP.NET。上面的示例只是一個測試代碼,如果成功,我將轉移到實際代碼。我使用JavaScript/jQuery的原因是爲了避免服務器回發。順便說一句,你的代碼不工作:'c http://jsfiddle.net/annelagang/KEqqH/ –

+0

啊,對不起。我的眼睛似乎跳過了你的AJAX建議部分。呵呵。將嘗試使用AJAX。謝謝。 –

+0

@AnneLagang你需要將庫設置爲你的小提琴上的jQuery :) – jammypeach