我该如何使用javascript来一次一个地显示一个div？

我想要一个页面，其中一个div显示，然后当用户点击空格键时，该div被隐藏并显示下一个div。我开始使用CSS来设置所有div隐藏的可见性，但是当我按下空格时，什么都不会发生。我该如何使用javascript来一次一个地显示一个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);

来源

2014-01-22 brooks.johnson

你能做出的jsfiddle？ –

我改了一下你的代码来使用jQuery（因为它被列为标签，我认为它是可用的）。此代码，您可以设置尽可能多的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.

来源

2014-01-22 22:10:27 Samsquanch

你不是很一致，变量名更改，当您去，文件是不是一个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

来源

2014-01-22 22:02:38 adeneo

如何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; 
    } 
});

来源

2014-01-22 22:03:35 SenorAmor

doc未定义。

你需要var doc = document;

您事件处理程序需要勾窗口。

window.addEventListener("keydown", updateDiv);

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

你不是真的在使用jQuery，所以不要使用它。

来源

2014-01-22 22:03:50

对不起，当我把它粘贴到SO并忘记更改文档时，我改变了一些东西。 –

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/

来源

2014-01-22 22:11:49 MamaWalter

我该如何使用javascript来一次一个地显示一个div？

回答

相关问题