Fonctions affectées au nombre de clics/clics

Question

J'ai la configuration de script ci-dessous. Je voudrais mieux réécrire le script auquel les fonctions sont assignées plus spécifiques à chaque clic, EG. Click = 3 does so and so, and Click = 4, does this and that.

EDIT: Par exemple, vous pouvez consulter mon échantillon en direct à l'avis « http://bit.ly/10BW89N », les clics fait feu commande. J'ai ajouté une simple 'alerte' pour essayer et tester, et les clics et les fonctions ne se déclenchent toujours pas dans le bon ordre.

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

..autres suggestions?

Answer 1

Vous pouvez utiliser une instruction JavaScript switch en combinaison avec certaines fonctions comme jQuery afin de simplifier votre code et faire ce que vous voulez qu'il:

//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 pour un exemple de mise en œuvre cela.

Vous pouvez également conserver encore les fonctions distinctes que vous avez dans votre mise en œuvre et les appeler de chaque bloc case conditionnel au besoin comme ceci:

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

espoir qui aide.

Answer 2

Qu'en est-il de quelque chose comme ça?

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

Si vous êtes dans un environnement sans Object.keys et vous ne voulez pas qu'il Shim, vous pouvez simplement coder en dur l'événement compte, bien que vous devez vous rappeler de le changer si vous ajoutez ou supprimer des événements .

Cela fonctionnera un peu comme le tableau pour l'accès indexé, mais vous permet d'assigner explicitement les fonctions spécifiques aux valeurs particulières.