Question

$("#searchType").on('change', function () {
    var selectionAction = {
        All: loadAll(),
        Competitions: loadAll("competitions"),
        Clubs: loadAll("clubs"),
        Teams: loadAll("teams")
    };
    var selection = $("#searchType").find('option:selected').val();
    selectionAction[selection]
});

参见上面的代码。这个想法是当选择等于我的对象中的一个属性时，将调用相应的函数。

e.g。当选择等于Competitions时，我们将调用loadAll("competitions")函数。

相反，我发现当它进入onChange函数时，它会调用所有函数。

我在这里做错了什么？

Answer 1

使用匿名函数拨打电话。目前，您正在存储未定义的函数调用的结果

var selectionAction = {
    All: function(){loadAll()},
    Competitions: function(){loadAll("competitions")},
    Clubs: function(){loadAll("clubs")},
    Teams: function(){loadAll("teams")}
};
var selection = $("#searchType").find('option:selected').val();
selectionAction[selection]();// make sure to call the anonymous function

或者，如果您更喜欢简洁，

$("#searchType").on('change', function () {
 loadAll($("#searchType").find('option:selected').val().replace("All","").toLowerCase())
});

Answer 2

当您指定loadAll()，loadAll("competitions")，loadAll("clubs")等时，您实际上是在立即执行该功能。你想要做的是让你的对象具有非函数调用的属性，如下所示：

 var selectionAction = {
    All: '',
    Competitions: 'competitions',
    Clubs: 'clubs',
    Teams: 'teams'
  };

然后做：

var selection = $("#searchType").find('option:selected').val();
loadAll(selectionAction[selection]);

并确保您的loadAll函数检查其第一个参数是否存在。

Javascript：定义函数映射

2 个答案: