Javascript

Question

我可以通过点击一个link来交换两个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);
        }
    });

Answer 1

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

作为示例，我使用了 "Arrow Down Key"，其键码为 40。

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

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

Javascript - 在 KeyDown 上交换 Div

Javascript - Swap Divs on KeyDown

html

swap

toggle