页面加载时调用 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