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

Answer 2

this fiddle?

怎么样？

var ctr = 1;
var max = 3;
$(document).on('keypress', function (e)
{
    if (e.which == 32)
    {
        $('div').hide();
        $('#d' + ctr).show();
        ctr++;

        if (ctr > max)
            ctr = 1;
    }
});

Answer 3

doc未定义。

您需要var doc = document;

您的事件处理程序需要挂钩到窗口。

window.addEventListener("keydown", updateDiv);

在常规变量前面不需要$。

你并没有真正使用jQuery，所以请不要这样做。

Answer 4

我稍微更改了你的代码以使用jQuery（因为它被列为标签，我认为它是可用的）。此代码允许您根据需要设置任意数量的div，在隐藏旧div之前不显示新div，并在到达时保持最后一个div可见：

$('div').hide();
$('div:first').show();

$('body').keypress(function(event) {
    $visdiv = $('div:visible');
    if(event.which == 32 && !$visdiv.is(':last')) {
        $visdiv.hide(400, function() {
            $(this).next('div').show();
        });
    }
});

Fiddle for demonstration.

Answer 5

HTML：

<div class="bloc selected">Bloc 1</div>
<div class="bloc hidden">Bloc 2</div>
<div class="bloc hidden">Bloc 3</div>
<div class="bloc hidden">Bloc 4</div>

JS：

$(document).on('keypress', function (e) {
    var code = e.keyCode || e.which;
    if(code == 32) { 
        var next = ($('.selected').next('.bloc').length > 0) ? 
            $('.selected').next('.bloc') :  $('.bloc1');

        $('.selected').toggleClass('selected hidden');
        next.toggleClass('selected hidden');
    }
});

CSS：

.selected {
   display:bloc;
}
.hidden {
   display:none;
}

FIDDLE：http://jsfiddle.net/Zq8j2/2/

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

5 个答案: