La funzione Javascript viene richiamata al caricamento della pagina

Question

La mia funzione javascript switchDiv viene richiamata al caricamento della pagina, quando non la desidero. Quando viene chiamato, passa attraverso l'istruzione switch e fa ciascuno dei casi, ad eccezione del valore predefinito. Qualcuno sa come risolvere questo?

$(document).ready(function() { 
$("#be-button").on("click", switchDiv(1)); 
$("#red-button").on("click", switchDiv(2)); 
$("#green-button").on("click", switchDiv(3)); 
$("#blue-button").on("click", switchDiv(4)); 
}); 

var switchDiv = function (mapNum) { 
    console.log(mapNum); 
    switch(mapNum) { 
    case 1: 
     $("#be-data").show(); 
     $("#red-data").hide(); 
     $("#green-data").hide(); 
     $("#blue-data").hide(); 
     break; 
    case 2: 
     $("#be-data").hide(); 
     $("#red-data").show(); 
     $("#green-data").hide(); 
     $("blue-data").hide(); 
     break; 
    case 3: 
     $("#be-data").hide(); 
     $("#red-data").hide(); 
     $("#green-data").show(); 
     $("blue-data").hide(); 
     break; 
    case 4: 
     $("#be-data").hide(); 
     $("#red-data").hide(); 
     $("#green-data").hide(); 
     $("blue-data").show(); 
     break; 
    default: 
     $("#be-data").show(); 
     $("#red-data").hide(); 
     $("#green-data").hide(); 
     $("#blue-data").hide(); 
} 
} 

Answer 1

Si stanno eseguendo le funzioni, anziché passarle come parametri. Vale a dire, è necessario distinguere tra il passaggio di una funzione:

function myFunc() { } 
$("selector").on("click", myFunc); // "myFunc" is the handler 

e l'esecuzione di una funzione:

function myFunc() { } 
$("selector").on("click", myFunc()); // execute "myFunc" -- its return value is the handler 

Naturalmente, non è possibile utilizzare il primo in questo caso, poiché switchDiv si è un parametro . Un modo per aggirare il problema è quello di avvolgerla in una funzione anonima:

$("#be-button").on("click", function() { switchDiv(1); }); 

Dal momento che si sta facendo questo più volte, tuttavia, probabilmente si vuole una funzione di supporto del tipo "createHandler" o qualcosa del genere:

function createHandler(num) { 
    return function() { switchDiv(num); }; 
} 

$("#be-button").on("click", createHandler(1)); 
$("#red-button").on("click", createHandler(2)); 
// etc