"document.getElementById 不能選擇多個元素"

Question

我正在加載。 我有 div #loading<\/code>這是可見的。 還有更多隱藏的 div #message<\/code> 。 我有js功能。

function loading() {
     setTimeout(function() {
         document.getElementById("loading").style.display = "none";
         document.getElementById("message").style.display = "block";
     }, 500, "fadeOut");
 }

Answer 1

您需要為 DOM 元素使用唯一 ID。 嘗試像這樣修改你的代碼：

<script type="text/javascript">
function loading() {
  setTimeout(function() {
    document.getElementById("loading").style.display = "none";
    var el = document.getElementsByClassName('message');
    console.log(el);
    $.each(el, function(i, item){
    item.style.display = 'block';
    });
  }, 500, "fadeOut");
}
loading();
</script>
<style>
#loading {
  display: block;
}
.message{
  display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages" onload="loading();">
  <div id="loading">
    ...
  </div>
  <div class="message">
    QWERTY
  </div>
  <div class="message">
    123456
  </div>
</div>

Answer 2

正如其他人提到的id是唯一的，並且只能在頁面上使用一次，因此請改用類。 在這里，我使用querySelectorAll來獲取類的靜態列表。

另一個問題是您似乎試圖使用 jQuery 來淡出元素，但您沒有將 jQuery 用於其他任何事情。 我將建議您使用 CSS 轉換。 它們易於使用，您無需加載龐大的庫。 在這里，我添加了新類fadein和fadeout ，它們（根據您的代碼）在三秒內將指定元素的不透明度增加/減少為零。

 function loading() { setTimeout(function() { // use a class for the loader too otherwise the transition // won't work properly const loader = document.querySelector('.loading'); loader.classList.add('fadeout'); // grab the elements with the message class const messages = document.querySelectorAll('.message'); // loop over them and add a fadeout class to each [...messages].forEach(message => message.classList.add('fadein')); }, 500); } loading();

 .loading { opacity: 1; } .message { opacity: 0; } .fadein { transition: opacity 3s ease-in-out; opacity: 1; } .fadeout { transition: opacity 3s ease-in-out; opacity: 0; }

 <div class="messages"> <div class="loading"> Loading </div> <div class="message"> QWERTY </div> <div class="message"> 123456 </div> </div>

Answer 3

ID屬性必須是唯一的。 您不能在頁面上多次使用相同的 ID。 如果您喜歡使用相同的鍵，則將其用作可以相同或不同的class或data-id 。

Answer 4

您不能在一個文檔中兩次使用相同的 id，以便選擇多個元素，將它們按相同的類而不是按 id 分組，然后使用以下內容將它們全部選中。

document.querySelectorAll(".ClassName")

或者

document.getElementsByClassName(".ClassName");

請注意，這兩種方法都返回文檔中具有指定類名的所有元素的集合，作為 NodeList 對象。

Answer 5

 function loading() { setTimeout(function() { document.getElementById("loading").style.display = "none"; document.getElementById("message").style.display = "block"; }, 500, "fadeOut"); } loading();<\/code><\/pre>
 #loading { display: block; } #message { display: none; }<\/code><\/pre>
 <script src="https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js"><\/script> <div class="messages" onload="loading();"> <div id="loading"> ... 

<div id="message"> QWERTY

<div id="message"> 123456 <\/code><\/pre>

"