Javascript：定义功能图

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]
});

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

例如，当选择等于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函数检查其第一个参数的存在。