Question

我可以通过单击一个链接来交换两个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”关键字。
您在事件监听器内部调用的函数div1中传递了两个分别不存在的变量，分别为div2和SwapDivs。
如果要向正文添加事件监听器，则必须添加<body>标签。

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

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

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

Javascript-在KeyDown上交换Divs

1 个答案: