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

在页面加载时调用Javascript函数

1 个答案: