"切换"事件后的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. switch如果你想要两个loads 同时发生,请把它放在声明之后.例如,最后收拾:

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

   我假设我们只想在密钥匹配时才这样做.如果我错了,就把它移出if.

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

   if (direction) {
       $("#world").load("../modules/Map.php?go&move=" + direction, function() {
           // This gets called when the load completes
           $("#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数组不是真正的数组.但同样,我们使用的是普通对象,而不是数组.)