javascript - 如何使用 javascript 一次按顺序显示一个 div？

Question

我试图让一个页面显示一个 div，然后当用户点击空格键时，该 div 被隐藏并显示下一个 div。我开始使用 CSS 将所有 div 的可见性设置为隐藏，但是当我按下空格时没有任何反应。

$divID = 0;
document.getElementById("div0").style.visibility="visible";

function updateDiv(event){
    // If the spacebar was pressed
    if (event.type == "keydown" && event.which == 32){ 
        // Hide the current div
        $doc.getElementById("div" + $divID).style.visibility="hidden";
        ++divID;

       // Move to next div
       $doc.getElementById("div" + $divID).style.visibility="visible";
    }
}
// Handle events
document.on("keydown", updateDiv);

Answer 1

你不是很一致，变量名随你改变，文档不是 jQuery 对象并且没有 on() 方法等。

var divID = 0;

document.getElementById("div0").style.visibility="visible";

function updateDiv(event){
    // If the spacebar was pressed
    if (event.type == "keydown" && event.which == 32){ 
        // Hide the current div
        document.getElementById("div" + divID).style.visibility="hidden";
        ++divID;

       // Move to next div
       document.getElementById("div" + divID).style.visibility="visible";
    }
}
// Handle events
$(document).on("keydown", updateDiv);

FIDDLE