Javascript - 在 KeyDown 上交换 Div答案

【问题标题】：Javascript - Swap Divs on KeyDownJavascript - 在 KeyDown 上交换 Div
【发布时间】：2018-09-19 13:22:33
【问题描述】：

我可以通过点击一个链接来交换两个div，如下代码所示，但是如何通过按键来交换它们呢？

这就是我所拥有的：

function SwapDivs(div1, div2) {
        d1 = document.getElementById(div1);
        d2 = document.getElementById(div2);
        if (d2.style.display == "none") {
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }
    }

<p>
    <a href="javascript:SwapDivs('FirstDiv','SecondDiv')">Swap Divs</a>
</p>


<div id="FirstDiv" style="display:block">
    <p>
        This div is displayed when the page opens.
    </p>
</div>

<div id="SecondDiv" style="display:none">
    <p>
        This div is displayed when the link is clicked.
    </p>
</div>

我之前用过OnKeyDown，但是这里不知道怎么应用……

这是行不通的：

    document.body.addEventListener("keydown", function(event) {
        if (event.keyCode === 32) {
            function SwapDivs(div1, div2);
        }
    });

【问题讨论】：

您不应该像在链接的工作示例中那样使用参数“FirstDiv”和“SecondDiv”调用SwapDivs吗？
我试过这个：document.body.addEventListener("keydown", function(event) { if (event.keyCode === 32) { SwapDivs(div1, div2); } });但是还是不行……
我认为您错过了我评论的关键点。试试这个：ocument.body.addEventListener("keydown", function(event) { if (event.keyCode === 32) { SwapDivs('FirstDiv', 'SecondDiv'); } });
解决了。感谢您的帮助。

标签： javascript html toggle swap

【解决方案1】：

如果你调用一个函数，你不要在它前面写“function”关键字。
您在事件侦听器内部调用的函数SwapDivs 中传递了两个不存在的变量div1 和div2。
如果要向正文添加事件侦听器，则必须添加 <body> 标记。

作为示例，我使用了键码为 40 的“向下箭头键”。

    document.body.addEventListener("keydown", function(event) {
        if (event.keyCode === 40) {
           SwapDivs('FirstDiv','SecondDiv');
        }
    });

这是一个代码笔：https://codepen.io/anon/pen/MqZomW

【讨论】：

谢谢，但它对我不起作用。我在你链接的页面上试过了，我也试过复制粘贴代码，用 Firefox、Chrome 和 IE 打开。链接仍然有效，但是当我按空格键时，什么也没有发生...您认为可能是什么问题？
它可以与向下箭头键一起使用。我将密钥代码更改为 32（空格）并开始工作。非常感谢您的帮助！