使用JavaScript，如何使元素逐個顯示

如何讓塊單獨顯示時，我點擊一個按鈕？一次點擊=一個塊出現。使用JavaScript，如何使元素逐個顯示

<div class="gallery"> 
    <div class="block"> 
     <div class="img"></div> 
    </div> 
    <div class="block"> 
     <div class="img"></div> 
    </div> 
    <div class="block"> 
     <div class="img"></div> 
    </div> 
    <div class="block"> 
     <div class="img"></div> 
    </div> 
</div> 
<button id="btn"></button>

來源

2016-06-18 Dima Vleskov

下面是一個使用jQuery（如您的標籤中提到的）的工作示例。一些注意事項：

我做了一個名爲hidden的CSS類，並添加到每個塊。
使用jQuery，我爲按鈕創建了一個點擊處理程序，它找到hidden類的第一個塊並刪除該類。這是顯示該塊的結果。

下面是完整的代碼：

.block { display: none; }

然後，處理程序添加到按鈕，使第一不可見可見：

<!doctype html> 
<html> 
<head> 
    <style> 
     .hidden { display: none; } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
</head> 
<body> 
    <div class="gallery"> 
     <div class="block hidden"> 
      <div class="img"></div> 
      first block 
     </div> 
     <div class="block hidden"> 
      <div class="img"></div> 
      second block 
     </div> 
     <div class="block hidden"> 
      <div class="img"></div> 
      third block 
     </div> 
     <div class="block hidden"> 
      <div class="img"></div> 
      fourth block 
     </div> 
    </div> 
    <button id="btn">Click me</button> 

    <script> 
     $(function() { 
      $('#btn').click(function() { 
       $('.gallery .hidden').first().removeClass('hidden'); 
      }); 
     }); 
    </script> 
</body> 
</html>

來源

2016-06-18 15:04:31 smarx

smarx非常感謝，你真是幫了我 –

-1

首先使用CSS無形的所有塊：

$("#btn").on("click", function() { 
    $(".gallery").find(".block:hidden").first().css({ display: "block"; }); 
});

來源

2016-06-18 15:05:09

有一對夫婦在你的代碼拼寫錯誤的（'：沒有（：可見）'和額外的'，'的CSS後面）。但即使你要改變這些，它仍然不起作用。這將一次顯示全部。 – putvande

它似乎有很多方法使它的工作，但我找不到任何人:(我需要更多的練習 –

謝謝，@putvande，我真的錯過了*第一*元素的點，我只在我的文本中解釋，但而不是在代碼中，我糾正了這一點，我也簡化了選擇器，因此它不再需要否定。對於css中的分號，這是一個品味問題，請參閱http://stackoverflow.com/questions/2406717/分號中，CSS –

僅使用js

var count = 0; 
 
function i(){ 
 
\t items = document.getElementsByClassName("block"); 
 
    if(count < items.length) 
 
     \t items[count++].style.display = "block"; 
 
}

.block{ 
 
    display: none; 
 
}

<div class="gallery"> 
 
    <div class="block"> 
 
      <div class="img">1</div> 
 
    </div> 
 
    <div class="block"> 
 
      <div class="img">2</div> 
 
    </div> 
 
    <div class="block"> 
 
    <div class="img">3</div> 
 
      </div> 
 
    <div class="block"> 
 
    <div class="img">4</div> 
 
    </div> 
 
</div> 
 
<button id="btn" onclick="i()">appear one by one</button>

來源

2016-06-18 15:06:38 lsv

你可以只顯示第一個不可見的。爲了稍微改進，我們不是查看每個函數調用的可見性，而是在dom負載下緩存隱藏塊的列表（$blocks）。

在函數結束時，更新可見塊列表（顯示切換的列表）。

注意：這不適用於在初始dom加載後添加的動態添加塊，但代碼可以輕鬆更新。

$blocks = $('.block:not(:visible)'); 
 

 
function showBlock() { 
 
    var $block = $blocks.first().css('display', 'block'); 
 
    $blocks = $blocks.not($block); 
 
}

.block { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="gallery"> 
 
    <div class="block"> 
 
    <div class="img"></div> 
 
    one 
 
    </div> 
 
    <div class="block"> 
 
    <div class="img"></div> 
 
    two 
 
    </div> 
 
    <div class="block"> 
 
    <div class="img"></div> 
 
    three 
 
    </div> 
 
    <div class="block"> 
 
    <div class="img"></div> 
 
    four 
 
    </div> 
 
</div> 
 
<button id="btn" onclick="showBlock()">Show Block</button>

來源

2016-06-18 15:11:11 BotNet

使用JavaScript，如何使元素逐個顯示

回答

相關問題