分配给每次点击次数/点击次数的函数

Question

我有下面的脚本设置。我想更好地重写该函数将被分配更具体的每次点击脚本，EG. Click = 3 does so and so, and Click = 4, does this and that.

编辑：例如，你可以看到我在“http://bit.ly/10BW89N”通知现场样品时，点击完成火订购。我已经添加了一个简单的“提醒”来尝试和测试它，并且点击和功能仍然没有以正确的顺序触发。

$(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(); 
    }); 
}); 

..你有什么建议吗？

Answer 1

你可以组合使用JavaScript switch声明与一些jQuery的功能，像这样简化代码，做你想让它是什么：

//global userClicks variable holds count of user clicks 
var userClicks = 0;  

//Standard jQuery click function to catch the user clicks  
$('#area1').click(function() { 

     //code to increment clicks here... 
     userClicks+=1; 

     //call the below function with the switch statement and execution code 
     callSwitch(userClicks); 

}); 

    //the JavaScript function which takes the number of clicks as a parameter 
    function callSwitch(numClicks){ 

     //switch statement based on parameter passed to enclosing function 
     switch (numClicks) 
     { 
     case 1: 
      alert('SHAKING!'); 
      break; 

     case 2: 
      alert('BZZZZZZZZZZZ!'); 
      break; 

     case 3: 
      $("#area1").hide(); 
      $("#area2").show(); 
      break; 

     case 5: 
      alert('YES!'); 
      break; 

     case 6: 
      $("#bg_div").hide(0).delay(1500).show(0); 
      $("#bg_skew").show(0).delay(1500).hide(0); 
      break; 

     case 7: 
      alert('NO!'); 
      break; 

     case 8: 
      $("#area1").hide(0).delay(1500).show(0); 
      $("#area2").hide(0).delay(1500).show(0); 
      $("#sound1").show(0).delay(1500).hide(0); 
      break; 
     } 
    } 

Here is my JSFiddle link示例实现这一点。

你也仍然可以保持独立的功能，你在你的工作能够根据需要，像这样只是叫他们从每一个条件case块：

switch (numClicks) 
      { 
      case 1: 
       function1(); 
       break;   
      case 2: 
       function2(); 
       break; 
      case 3: 
       function3(); 
       break; 
      } 

希望有所帮助。

Answer 2

这样的事情呢？

$(document).ready(function() { 
    var a1_c = 0, a1_Events = { 
     0: function() { 
       alert('SHAKING!'); 
      }, 
     1: function() { 
       alert('BZZZZZZZZZZZ!'); 
      }, 
     2: function() { 
       $("#area1").hide(); 
       $("#area2").show(); 
      }, 
     3: function() { 
       alert('YES!'); 
      }, 
     4: function() { 
       $("#bg_div").hide(0).delay(1500).show(0); 
       $("#bg_skew").show(0).delay(1500).hide(0); 
      }, 
     5: function() { 
       alert('NO!'); 
      }, 
     6: function() { 
       $("#area1").hide(0).delay(1500).show(0); 
       $("#area2").hide(0).delay(1500).show(0); 
       $("#sound1").show(0).delay(1500).hide(0); 
      } 
    }, a1_EventCount = Object.keys(a1_Events).length; // or hard-code 7. 

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

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

如果你在没有Object.keys的环境中，你不想垫片它，你可以简单地硬编码的事件计数，但你必须记住，如果你添加更改或删除事件。

这将与用于索引访问的数组非常类似，但可让您将特定函数明确分配给特定值。