在頁面加載時調用Javascript函數

Question

我的javascript switchDiv函數在頁面加載時被調用，當我不希望它。當它被調用時，它會通過switch語句並執行除默認值之外的每種情況。任何人都知道如何解決這個問題？

$(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

您正在執行這些函數，而不是將它們作爲參數傳遞。也就是說，你需要傳遞一個函數來區分：

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

和執行功能：

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

當然，你不能使用先在此情況下，由於switchDiv本身的參數。要解決這個問題的方法之一是把它包在一個匿名函數：

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

既然你這樣做多次，但是，你可能會想一個輔助功能，例如「createHandler」或東西：

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

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