클릭 카운터, 클릭당 다른 이벤트

Question

페이지의 특정 영역에 대한 클릭 수를 계산하고 유지하는 배열을 만들려고합니다. 그런 다음 클릭당 금액을 무언가를하고 싶습니다. 예) 5 번째 버튼은 mp3를 통해 소리를냅니다. 페이지가 흔들리는 여섯 번째 클릭.

배열을 작성하여 특정 클릭 수에 무언가를 할당하면서 클릭 수에 따라 다른 이벤트를 추가 할 수 있습니까?

Answer 1

http://jsbin.com/izutav/1/edit

를 단순히 이벤트 기능의 배열을 생성함으로써 : 당신이 당신의 이벤트 루프를 원하지 않는 경우

var a1_Events = [shake, noise, something], 
    a1_c = 0; 


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

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

function something(){ 
    alert('SOMETHING ELSE!'); 
} 


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

을 사용하는 것보다 : a1_Events[a1_c++]();

Answer 2

var clicks = 0; 
$('a').click(function() { 
    switch(++clicks) { 
     case X: 
      /* do something */ 
      break; 
     /* ... */ 
    } 
}); 

또는 배열이 같은

var myEvents = [function1, function2, function3]; 
var clicks = -1; 
$('a').click(function() { 
    clicks++; 
    if(myEvents[clicks] != undefined) myEvents[clicks](); 
}); 

Answer 3

뭔가 기능을 저장할 수 있습니다!

var actions = { 
    5: 'playMusic', 
    6: 'shakeDiv'  
}, 
actors = { 
doNothing: function() {/*default action; do nothing;*/}, 
playMusic: function() { 
    alert('Your are about to here a music now'); 
    /*place code for playing music here*/ 
    }, 
shakeDiv: function() { 
    alert('page is about to shake'); 
    /* place shake animation code here*/ 
    } 
}, 
defaultActionName = 'doNothing';//default action name 


var clickCount = 0; 

$('yourSelectorForThepart').click(function(e) { 
    clickCount++; 
    doAction(); 
}); 

function doAction() { 
    var actionName = actions[clickCount] || defaultActionName; 
    actors[actionName](); 
} 

그리고 그래, 당신은 단지 actions & actors 병합 할 수 있습니다. 그러나 유지 관리를 위해이 접근법을 선호합니다. & 가독성.

Answer 4

이처럼 할 수있는 :

// put your click actions as functions here 
var clickEvents = [function1, function2, function3, function4, playMP3, shakePage]; 
var clicks = 0; 
// put your clickable object here 
clickableObject.onclick = function(){ 
    clickEvents[clicks](); 
    clicks++; 
}