分配給每次點擊次數/點擊次數的函數

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的環境中，你不想墊片它，你可以簡單地硬編碼的事件計數，但你必須記住，如果你添加更改或刪除事件。

這將與用於索引訪問的數組非常類似，但可讓您將特定函數明確分配給特定值。