“切换”后的 jQuery 操作事件

Question

我创建了一张地图，用户可以从一栋建筑步行到另一栋建筑。地图旁边有一个小地图。 “大”地图只需使用 load() 命令即可刷新。我有以下代码：

    $(document).keydown(function(event) {

        switch (event.keyCode) {

            // A
            case 65: $("#world").load("../modules/Map.php?go&move=w"); break;

            // W
            case 87: $("#world").load("../modules/Map.php?go&move=n"); break;

            // D
            case 68: $("#world").load("../modules/Map.php?go&move=e"); break;

            // S
            case 83: $("#world").load("../modules/Map.php?go&move=s"); break;

        }

    });

现在，在按下其中一个键后，我希望执行以下操作：

$("#minimap").load("../modules/Minimap.php");

我希望你能帮助我。

Answer 1

你有两个选择，但首先，让我们稍微重构一下（我稍后会重构更多内容，但让我们从这个开始）：

$(document).keydown(function(event) {
    var direction;

    switch (event.keyCode) {

        // A
        case 65: direction = 'w'; break;

        // W
        case 87: direction = 'n'; break;

        // D
        case 68: direction = 'e'; break;

        // S
        case 83: direction = 's'; break;
    }

    if (direction) {
        $("#world").load("../modules/Map.php?go&move=" + direction);
    }
});

现在第一个负载是集中的，我们不会重复自己。

好的，您有两个选择：

1. 如果您希望两个 load 同时发生，请将其放在 switch 语句之后。例如，在最后拿起：

   if（方向）{
       $("#world").load("../modules/Map.php?go&move=" + 方向);
       $("#minimap").load("../modules/Minimap.php");
   }
   

   我假设我们只想在密钥匹配时才执行此操作。如果我错了，请将其移出 if。

2. 如果您希望第二个加载等待第一个加载完成，请在第一个加载上使用success回调。

   if（方向）{
       $("#world").load("../modules/Map.php?go&move=" + 方向, function() {
           // 加载完成时会调用此函数
           $("#minimap").load("../modules/Minimap.php");
       });
   }
   

更多信息请参见文档。

---

这是更彻底的重构版本： 有这个：

var directionKeyMap = {
    '65': 'w',  // A
    '87': 'n',  // W
    '68': 'e',  // D
    '83': 's'   // S
};

然后要么这个（上面的选项 1）：

$(document).keydown(function(event) {
    var direction;

    direction = directionKeyMap[event.keyCode];
    if (direction) {
        $("#world").load("../modules/Map.php?go&move=" + direction);
        $("#minimap").load("../modules/Minimap.php");
    }
});

或者这个（上面的选项 2）：

$(document).keydown(function(event) {
    var direction;

    direction = directionKeyMap[event.keyCode];
    if (direction) {
        $("#world").load("../modules/Map.php?go&move=" + direction, function() {
            $("#minimap").load("../modules/Minimap.php");
        });
    }
});

这些使用对象将键码映射到方向，利用这样的事实，您可以使用以下命令查找对象属性：括号内的记号。

（不用担心 keyCode 是一个数字，但我们映射中的键是字符串；每当您使用括号表示法时，您给出的任何内容都会被 JavaScript 解释器转换为字符串。事实上，这就是即使您索引到数组时也是如此，因为 JavaScript 数组 并不是真正的数组但同样，我们使用的是普通对象，而不是数组。）