7

switchDiv当我不希望它在页面加载时调用我的 javascript函数。当它被调用时，它会通过 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();
}
}
4

1 回答 1

21

您正在执行函数，而不是将它们作为参数传递。即，您需要区分传递函数：

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
于 2013-10-21T20:22:26.257 回答