我該如何使用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？

回答

相關問題