gpt4 book ai didi

Javascript - 在 KeyDown 上交换 Div

转载 作者:行者123 更新时间:2023-11-30 14:23:05 25 4
gpt4 key购买 nike

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

最佳答案

  1. 如果您调用一个函数,则不要在它之前写上“function”关键字。

  2. 您传递了两个不存在的变量 div1div2在函数中 SwapDivs这是在事件监听器内部调用的。

  3. 如果要向主体添加事件监听器,则必须添加 <body>标签。

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

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

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

关于Javascript - 在 KeyDown 上交换 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52406907/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com