功能在特定的點擊與點擊計數器在一個div按鈕

Question

我正在創建一個迷你的JavaScript遊戲。我想通過一個點擊計數器通過一個#div按鈕在一定量的點擊下發生一系列效果和功能。

爲了讓我的功能發揮到我所追求的效果，我得到了非常接近的結果，但我需要按照點擊次數和點擊次數來組織它，並按ONE #div按鈕發生無錯誤。所以，基本上將所有這些功能綁定到一個按鈕上就沒有問題。

我需要一個點擊計數器，據推測。 EG, Click 1 = This function fires. Click 2 = This function fires.目前我的大部分功能都能正常工作，但是全部都是亂碼。 需要觸發這些功能，具體點擊次數。因此，需要統計並存儲點擊次數。

任何指針？

下面是它如何塑造：

$(document).ready(function() { 

$var a1_Events = [function1, function2, function3, function4, function5, function6, function7, function8], 
    a1_c = 0; 


function function1(){ 
    alert('SHAKING!'); 
} 

function function2(){ 
    alert('BZZZZZZZZZZZ!'); 
} 

function function3(){ 
    $("#area1").click(function(){ 
    $("#area1").hide(); 
    $("#area2").show(); 
    }); 
} 

function function4(){ 
    $("#area2").click(function(){ 
    $("#area1").show(); 
    $("#area2").hide(); 
    }); 
} 

function function5(){ 
    alert('YES!'); 
} 

function function6(){ 
$("#area1").click(function(){ 
    $("#bg_div").hide(0).delay(1500).show(0); 
    $("#bg_skew").show(0).delay(1500).hide(0); 
    }); 
} 

function function7(){ 
    alert('NO!'); 
} 

function function8(){ 
$("#area1").click(function(){ 
    $("#area1").hide(0).delay(1500).show(0); 
    $("#area2").hide(0).delay(1500).show(0); 
    $("#sound1").show(0).delay(1500).hide(0); 
    }); 
} 

$('#area1').click(function(){ 
    a1_Events[a1_c++ % a1_Events.length](); 
    }); 
}); 

---

&是。我試圖允許一個 div作爲主要的'按鈕'可以這麼說，以允許這些功能點擊。首先點擊BOOM，發生此功能，然後點擊BAM，發生此功能，等等。可能通過存儲和跟蹤點擊次數。再次，點擊特定的點擊'x'並不是每次點擊。

Answer 1

你已經得到它做你想要這個東西：

$('#area1').click(function() { 
    a1_Events[a1_c++ % a1_Events.length](); 
}); 

但隨後，由於Bergi pointed out，一些你的點擊處理程序綁定其他點擊處理程序。一旦這些被調用，你將有多個函數被每次點擊調用。將這些函數更改爲不綁定新的點擊處理程序，而只是執行該操作。例如，function3()應該是：

function function3() { 
    $("#area1").hide(); 
    $("#area2").show(); 
} 

變化function6()和function8()以同樣的方式。刪除function4()作爲#area1的點擊處理程序。它永遠不會被調用，因爲它不會被調用，直到function3()，它隱藏#area1，使它不可點擊。只需在文檔就緒處理程序中直接綁定#area2的點擊事件即可。你有$var a1_Events。我認爲這只是一個錯字。

$(document).ready(function() { 
    var a1_Events = [function1, function2, function3, function5, function6, function7, function8], 
     a1_c = 0; 
    function function1() { 
     alert('SHAKING!'); 
    } 
    function function2() { 
     alert('BZZZZZZZZZZZ!'); 
    } 
    function function3() { 
     $("#area1").hide(); 
     $("#area2").show(); 
    } 
    function function5() { 
     alert('YES!'); 
    } 
    function function6() { 
     $("#bg_div").hide(0).delay(1500).show(0); 
     $("#bg_skew").show(0).delay(1500).hide(0); 
    } 
    function function7() { 
     alert('NO!'); 
    } 
    function function8() { 
     $("#area1").hide(0).delay(1500).show(0); 
     $("#area2").hide(0).delay(1500).show(0); 
     $("#sound1").show(0).delay(1500).hide(0); 
    } 
    $('#area1').click(function() { 
     a1_Events[a1_c++ % a1_Events.length](); 
    }); 
    $("#area2").click(function() { 
     $("#area1").show(); 
     $("#area2").hide(); 
    }); 
}); 

jsfiddle.net/uWVAb