Chức năng Javascript đang được gọi khi tải trang

Question

Chức năng javascript switchDiv của tôi đang được gọi khi tải trang, khi tôi không muốn. Khi được gọi, nó đi qua câu lệnh switch và thực hiện từng trường hợp, ngoại trừ trường hợp mặc định. Co ai biêt lam cach nao để sửa no không?

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

Bạn đang thực hiện các chức năng, thay vì chuyển chúng làm tham số. Ví dụ, bạn cần phải phân biệt giữa truyền một hàm:

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

Và thực hiện một chức năng:

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

Tất nhiên, bạn không thể sử dụng đầu tiên trong trường hợp này, vì switchDiv bản thân đã một tham số . Một cách để làm được việc này là để bọc nó trong một chức năng ẩn danh:

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

Vì bạn đang làm điều này nhiều lần, tuy nhiên, bạn có thể sẽ muốn có một chức năng helper như "createHandler" hoặc một cái gì đó:

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

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