javascript - 点击计数器，每次点击不同的事件

Question

我正在寻求创建一个数组来计算并跟踪对页面特定区域的点击；然后，我希望每次点击量都可以做一些事情。例如）通过 mp3 触发器的第 5 次单击声音。第六次点击页面抖动。

我如何编写一个数组来为每次点击添加不同的事件，为特定的点击次数分配一些东西？

Answer 1

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 2

像这样的东西！

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 3

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 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++;
}